<template>
  <div>
    <el-breadcrumb separator="/" class="bread_crumb1">
      <el-breadcrumb-item :to="{ path: '/data_analysis' }">
        {{
        $t("lang.dataAnalysis")
        }}
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        {{
        $t("lang.myServiceDataAnalysis")
        }}
      </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">4</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"
                :show_center_data="false"
                :bar_width="10 "
              ></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"></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 :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 apass_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="changeServeiceTotalChangeBtn"
            >
              <line-chart class="block-radius-content" :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="服务调用排名分析"
              :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="['近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="serveiceInfoBtnIndex == 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="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 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: () => ({
    left_1_state: 0,
    mult_data_state: [
      { name: "正常", value: 4 },
      { name: "警告", value: 2 },
      { name: "错误", value: 0 },
      { name: "未使用", value: 2 }
    ],
    mult_data: [
      { name: "数据服务", value: 4 },
      { name: "时空服务", value: 2 },
      { name: "视频服务", value: 0 },
      { name: "感知服务", value: 0 },
      { name: "综合服务", value: 2 }
    ],
    spIndicatorStyles1: false,
    spRefLineStyles3: {
      stroke: "#d14",
      strokeOpacity: 0,
      strokeDasharray: "2, 2"
    },
    spCurveStyles2: {
      stroke: "#274fee",
      fill: "#274fee"
    },
    spCurveStyles3: {
      stroke: "#e56600",
      fill: "#e56600"
    },
    sparkline1: {
      arr: [1, 2, 3, 4, 8, 9, 10, 21],
      num: 1231,
      up: 15.3
    },
    sparkline2: {
      arr: [1, 2, 3, 4, 8, 9, 10, 21],
      num: 182,
      up: -19.3
    },
    text: "服务总数",
    single_data: {
      num: 50,
      color: "#25bdb1",
      text: "共享"
    },
    single_data1: {
      num: 30,
      color: "#f5ab4c",
      text: "受限"
    },
    single_data2: {
      num: 20,
      color: "#e15260",
      text: "敏感"
    },
    line_data: {
      xaxis: [
        "01-01",
        "01-02",
        "01-03",
        "01-04",
        "01-05",
        "01-06",
        "01-07",
        "01-08",
        "01-09",
        "01-10",
        "01-11",
        "01-12",
        "01-13",
        "01-14"
      ],
      data: [
        {
          name: "开发者应用",
          arr: [10, 12, 13, 15, 16, 12, 11, 10, 15, 16, 19, 20, 22, 15, 18]
        },
        {
          name: "平台应用",
          arr: [12, 13, 14, 13, 14, 12, 10, 9, 11, 10, 9, 12, 13, 10, 9]
        },
        {
          name: "未上架",
          arr: [8, 9, 10, 11, 10, 7, 8, 9, 7, 6, 5, 8, 6, 7, 5]
        }
      ]
    },
    das_data: {
      data: 90,
      text: "健康占比"
    },
    bar_data: {
      xaxis: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
      data: [4, 1, 2, 1]
    },
    bar_data_org: {
      xaxis: [
        "省公安厅",
        "省发改委",
        "贵州省公安厅",
        "大数据中心",
        "省资源局",
        "js机构"
      ],
      data: [2, 1, 2, 1, 1, 1]
    },
    toplistData: [
      {
        name: "报警服务",
        value: 155,
        logo:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        unit: "次"
      },
      {
        name: "数据服务",
        value: 130,
        logo:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        unit: "次"
      },
      {
        name: "消息队列服务",
        value: 168,
        logo:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        unit: "次"
      },
      {
        name: "档案中心服务",
        value: 77,
        logo:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        unit: "次"
      },
      {
        name: "按键中心服务",
        value: 60,
        logo:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        unit: "次"
      },
      {
        name: "通用API服务",
        value: 32,
        logo:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        unit: "次"
      },
      {
        name: "案件中心服务",
        value: 15,
        logo:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        unit: "次"
      },
      {
        name: "数据中心服务",
        value: 3,
        logo:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        unit: "次"
      }
    ], // 服务调用排名分析
    toplistTargetValue: 180, // 服务调用排名分析 目标值
    serveiceInfoBtnIndex: 0,
    commentlistData: [
      {
        add_time: "2020-07-14T16:35:40Z",
        content: "1111111111111111",
        id: 36,
        picture_path:
          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
        score: 5,
        service_id: 128,
        user_name: "普通用户lxy"
      },
      {
        add_time: "2020-07-14T16:35:40Z",
        content: "222222222222",
        id: 36,
        picture_path:
          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
        score: 4,
        service_id: 128,
        user_name: "普通用户lxy"
      },
      {
        add_time: "2020-07-14T16:35:40Z",
        content: "33333",
        id: 36,
        picture_path:
          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
        score: 3,
        service_id: 128,
        user_name: "普通用户lxy"
      },
      {
        add_time: "2020-07-14T16:35:40Z",
        content: "4444",
        id: 36,
        picture_path:
          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
        score: 2,
        service_id: 128,
        user_name: "普通用户lxy"
      }
    ], // 服务评价
    linelistData: [
      {
        count: 6,
        percent: 75,
        title: "0.1% 错误",
        unit: "个"
      },
      {
        count: 2,
        percent: 25,
        title: "0.1 - 20% 错误",
        unit: "个"
      },
      {
        count: 0,
        percent: 0,
        title: "20% 错误",
        unit: "个"
      },
      {
        count: 0,
        percent: 0,
        title: "TCP连接",
        unit: "个"
      },
      {
        count: 0,
        percent: 0,
        title: "Idle",
        unit: "个"
      }
    ], // 服务状态统计
    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: 15,
    hotSearchHeader: [], // 热门搜索 表头
    hotSearchData: [
      {
        hotIndex: 1,
        name: "数据服务",
        count: 66,
        increases: 0.28
      },
      {
        hotIndex: 2,
        name: "消息队列服务",
        count: 54,
        increases: 0.15
      },
      {
        hotIndex: 3,
        name: "按键中心服务",
        count: 52,
        increases: 0.03
      },
      {
        hotIndex: 4,
        name: "案件中心服务",
        count: 37,
        increases: -0.08
      },
      {
        hotIndex: 5,
        name: "数据中心服务",
        count: 15,
        increases: -0.18
      }
    ], // 热门搜索 数据
    graph_arr: {
      xaxis: [
        "01-01",
        "01-02",
        "01-03",
        "01-04",
        "01-05",
        "01-06",
        "01-07",
        "01-08"
      ],
      data: [
        [1010, 120, 130, 520, 160, 1120, 110, 100],
        [100, 1210, 130, 1530, 160, 120, 110, 1200]
      ],
      legend: ["被调用次数", "调用次数"]
    },
    topology_datas: {}
  }),
  mounted() {
    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：降序
        sortable: true,
        align: "center"
      }
    ];
    this.getTopologyData();
  },
  methods: {
    detailHotSearch(item) {
      console.log("查看热搜详情");
    },
    hotSearchSortChange(sortInfo) {
      console.log("服务热门搜索: " + sortInfo);
    },
    changeServiceTypeBtn(index) {
      console.log("服务类型分析:" + index);
    },
    changeApplicationFieldBtn(index) {
      console.log("服务应用领域统计: " + index);
    },
    changeServeiceApplyCountBtn(index) {
      console.log("服务调用排名分析: " + index);
    },
    changeServeiceInfoBtn(index) {
      this.serveiceInfoBtnIndex = index;

      console.log("服务评价及评分: " + index);
    },
    changeOpenessBtnindex(index) {
      console.log("服务开放程度统计: " + index);
    },
    changeServiceCellBtn(index) {
      console.log("服务调用次数分析: " + index);
    },
    changeServeiceTotalChangeBtn(index) {
      console.log("服务总数变化趋势: " + index);
      console.log(index);
    },
    getTopologyData() {
      this.$api.workbench.getServiceTopology().then(response => {
        this.topology_datas = response.data.elements;
      });
    },
    changeServiceStateBtn(index) {
      console.log(index);
      this.left_1_state = index;
    }
  }
};
</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;
  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;
}
.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>