<template>
  <div class="detail_contain">
    <p class="now_page_title">
      我的服务 /
      {{
        now_user == 0 || now_user == 4
          ? "注册发布的服务"
          : now_user == 1
          ? "组织服务管理"
          : "平台服务管理"
      }}
      /
      <span>服务详情</span>
    </p>
    <div class="info_contain">
      <service-header :data="service_header_arr"></service-header>
      <div class="type_box">
        <div class="type_title">
          <div
            v-for="(item, index) in service_arr[now_user]"
            :key="index + 1000"
            :class="item == '' ? '' : 'type_select'"
            @click="now_service = index"
            :style="
              now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
            "
            v-if="index < 4 || in_origin_ser"
          >
            {{ item }}
          </div>
        </div>
        <div class="type_box_select">
          <info-list
            :list_arr="
              now_service != 0
                ? servicead_arr
                : data_service_type1 == '36'
                ? cp_arr
                : list_arr
            "
            v-if="
              now_service == 0 ||
              (now_service == 1 &&
                !workflows_id &&
                !perception_in &&
                !process_in_up)
            "
          >
            <table-um
              :headers="req_header_arr"
              :datas="req_data"
              :stripe="true"
              slot="req_table"
            ></table-um>
            <v-apaas-code
              :datas="req_code_arr"
              slot="req_code"
              :readOnly="true"
            ></v-apaas-code>
            <table-um
              :headers="res_header_arr"
              :datas="res_data"
              :stripe="true"
              slot="res_table"
            ></table-um>
            <v-apaas-code
              :datas="res_code_arr"
              slot="res_code"
              :readOnly="true"
            ></v-apaas-code>
            <mavon-editor
              slot="cp_md"
              v-model="cp_arr[6].item"
              :boxShadow="false"
              :toolbarsFlag="false"
              :subfield="false"
              defaultOpen="preview"
              :editable="false"
            />
          </info-list>
          <p v-if="now_service == 1 && workflows_id && !process_in_up">
            流程服务接口说明见文档中心流程服务接口文档
          </p>
          <info-list
            :list_arr="process_in_up_arr"
            v-if="now_service == 1 && !workflows_id && process_in_up"
          >
            <div slot="service_port" class="service_port">
              <el-select
                v-model="port_select"
                placeholder=""
                @change="change_port"
              >
                <el-option
                  v-for="item in port_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <div
                class="port_bg_box"
                style="
                  padding: 20px;
                  background-color: #f8f9fd;
                  margin-top: 10px;
                "
              >
                <info-list :list_arr="port_solt_arr">
                  <table-um
                    :headers="req_solt_header_arr"
                    :datas="req_solt_data"
                    :stripe="true"
                    slot="request_table"
                  ></table-um>
                  <v-apaas-code
                    :datas="req_solt_code_arr"
                    slot="request_code"
                    :readOnly="true"
                  ></v-apaas-code>
                  <table-um
                    :headers="res_solt_header_arr"
                    :datas="res_solt_data"
                    :stripe="true"
                    slot="response_table"
                  ></table-um>
                  <v-apaas-code
                    :datas="res_solt_code_arr"
                    slot="response_code"
                    :readOnly="true"
                  ></v-apaas-code>
                </info-list>
              </div>
            </div>
          </info-list>
          <info-list
            :list_arr="gz_solt_arr"
            v-if="now_service == 1 && perception_in"
          >
            <table-um
              :headers="req_gz_header_arr"
              :datas="req_gz_solt_data"
              :stripe="true"
              slot="request_table"
            ></table-um>
            <v-apaas-code
              :datas="req_solt_code_arr"
              slot="request_code"
              :readOnly="true"
            ></v-apaas-code>
            <table-um
              :headers="res_gz_header_arr"
              :datas="res_gz_solt_data"
              :stripe="true"
              slot="response_table"
            ></table-um>
            <v-apaas-code
              :datas="res_solt_code_arr"
              slot="response_code"
              :readOnly="true"
            ></v-apaas-code>
          </info-list>
          <div v-show="now_service == 2">
            <p class="service_title"><span></span>服务运行概况</p>
            <div
              class="service_port"
              style="margin-bottom: 20px"
              v-if="process_in_up"
            >
              <el-select
                v-model="port_select_server"
                placeholder=""
                ref="select_icon"
                @change="iconChange"
              >
                <el-option
                  v-for="item in port_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value + ',' + item.able"
                >
                  <span
                    v-if="!item.able"
                    :style="{
                      display: 'inline-block',
                      marginRight: '8px',
                      width: '36px',
                      height: '18px',
                      marginLeft: '-10px',
                      borderRadius: '4px',
                      backgroundColor: '#e15260',
                      lineHeight: '18px',
                      textAlign: 'center',
                    }"
                    >故障</span
                  >
                  <span
                    v-else
                    :style="{
                      display: 'inline-block',
                      marginRight: '8px',
                      width: '36px',
                      height: '18px',
                      borderRadius: '4px',
                      marginLeft: '-10px',
                    }"
                  ></span>
                  {{ item.label }}
                </el-option>
              </el-select>
            </div>
            <div>
              <div class="service_title_card">
                <nor-card title="服务状态" class="service_card">
                  <template>
                    <div style="height: 115px; padding-top: 10px">
                      <waveIcon
                        :state="yx_state.state"
                        style="margin: 10px auto"
                      ></waveIcon>
                      <p
                        style="
                          color: #58617a;
                          font-size: 16px;
                          text-align: center;
                        "
                      >
                        {{ yx_state.state }}
                      </p>
                    </div>
                  </template>
                </nor-card>
                <nor-card title="平均响应时间" class="service_card">
                  <template>
                    <div style="height: 115px" class="service_num">
                      <p>{{ yx_state.averageTime }}</p>
                      <p>最大响应时间：{{ yx_state.maxTime }}</p>
                    </div>
                  </template>
                </nor-card>
                <nor-card title="吞吐率" class="service_card">
                  <template>
                    <div style="height: 115px" class="service_num">
                      <p>{{ yx_state.averageTraffic }}</p>
                      <p>最大吞吐率：{{ yx_state.maxTraffic }}</p>
                    </div>
                  </template>
                </nor-card>
                <nor-card title="资源使用" class="service_card">
                  <template>
                    <div
                      style="height: 115px; padding-top: 30px"
                      class="service_num"
                    >
                      <p>{{ yx_state.memory }}</p>
                    </div>
                  </template>
                </nor-card>
              </div>
              <nor-card title="服务调用拓扑图" class="service_card_charts">
                <Topology :datas="datas" class="topology" />
              </nor-card>
            </div>
            <p class="service_title"><span></span>服务调用列表</p>
            <table-um
              v-if="!process_in_up && !perception_in"
              :headers="header_use_arr"
              :datas="service_use_arr"
            ></table-um>
            <table-um
              v-if="process_in_up"
              :headers="header_process_arr"
              :datas="service_use_arr"
            ></table-um>
            <table-um
              v-if="perception_in"
              :headers="header_gz_process_arr"
              :datas="service_use_arr"
            ></table-um>
            <list-pagination
              :total="listTotal"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              :current-page="currentPage"
              @size-change="changePageSize"
              @current-change="changeCurrentPage"
            ></list-pagination>
          </div>
          <div v-show="now_service == 3">
            <table-um
              :stripe="true"
              :headers="jkwd_headers"
              :datas="jkwd_datas"
              @download="download"
            ></table-um>
            <!-- <p style="color: #8890a7">服务规格：</p>
            <table-um
              :stripe="true"
              :headers="service_size_arr"
              :datas="service_size_data"
            ></table-um>
            <p style="color: #8890a7;">购买方式：</p>
            <p style="color: #242c43;margin:10px 0px;">
              {{
                buy_type == 1
                  ? "按月购买"
                  : buy_type == 2
                  ? "按年购买"
                  : "按月购买&按年购买"
              }}
            </p>
            <div
              class="editbtn"
              v-if="now_user == 1"
              @click="sizeset_flag = true"
            >
              编辑
            </div>
            <p
              v-if="now_user == 1 && sizeset_flag"
              style="color: #8890a7; margin-bottom: 10px"
            >
              规格设置：
            </p>
            <table-um
              v-if="now_user == 1 && sizeset_flag"
              :headers="edit_size_arr"
              headerCellClassName="th_pink"
              :border="true"
              :autoAdd="true"
              :couldNotEdit="false"
              :radius="true"
              :isIndex="true"
              :limitEditLength="2"
              :datas="service_size_data"
              @changeTable="now_size_data"
            ></table-um>
            <p
              v-if="now_user == 1 && sizeset_flag"
              style="color: #8890a7;margin:10px 0;"
            >
              购买方式：
            </p>
            <el-button
              v-if="now_user == 1 && sizeset_flag"
              :type="buy_style.indexOf(1) !== -1 ? 'primary' : ''"
              @click="change_buy(1)"
              >按月购买</el-button
            >
            <el-button
              v-if="now_user == 1 && sizeset_flag"
              :type="buy_style.indexOf(2) !== -1 ? 'primary' : ''"
              @click="change_buy(2)"
              >按年购买</el-button
            >
            <div class="savebtn" v-if="now_user == 1 && sizeset_flag">
              <el-button @click="change_service_size">保存</el-button>
              <el-button @click="sizeset_flag = false">取消</el-button>
            </div> -->
          </div>
          <div v-show="now_service == 4">
            <info-list :list_arr="trans_log_arr">
              <div slot="trans_all" class="trans_all">
                <div class="trans_box">
                  <div class="trans_middle">
                    <img src="../../../assets/imgs/ic_shouyizonge.png" alt="" />
                    <p>服务收益总额</p>
                    <p>{{ trans_all_obj.all }}</p>
                    <span>金币</span>
                  </div>
                </div>
                <div class="trans_box">
                  <div class="trans_middle">
                    <img src="../../../assets/imgs/ic_jiaoyizs.png" alt="" />
                    <p>交易总数</p>
                    <p>{{ trans_all_obj.times }}</p>
                    <span>笔</span>
                  </div>
                </div>
                <div class="trans_box">
                  <div class="trans_middle">
                    <img src="../../../assets/imgs/ic_yuejiaoyi.png" alt="" />
                    <p>本月交易总数</p>
                    <p>{{ trans_all_obj.month }}</p>
                    <span>笔</span>
                  </div>
                </div>
              </div>
              <div slot="trans_log" class="trans_log">
                <table-um
                  :headers="trans_log_header"
                  :datas="trans_log_data"
                ></table-um>
                <list-pagination
                  :total="translistTotal"
                  :page-sizes="pageSizes"
                  :page-size="transpageSize"
                  :current-page="transcurrentPage"
                  @size-change="transchangePageSize"
                  @current-change="transchangeCurrentPage"
                ></list-pagination>
              </div>
            </info-list>
          </div>
        </div>
      </div>
    </div>

    <dialog-action ref="myConfirm"></dialog-action>
  </div>
</template>

<script>
import infoList from "@/components/infoList";
import tableUm from "@/components/table/table-um";
import codes from "@/components/general/codes";
import norCard from "@/components/card";
import waveIcon from "@/components/general/wave_icon";
import Topology from "@/components/topology.vue";
import serviceHeader from "@/components/service-header";
import ListPagination from "@/components/comments-pagination";
import dialogAction from "@/components/dialog-action";
import { getRole, formatDateTime_date } from "@/utils/common";
import { mapGetters, mapState } from "vuex";
import helper from "@/services/helper";
export default {
  components: {
    infoList,
    tableUm,
    "v-apaas-code": codes,
    norCard,
    waveIcon,
    Topology,
    serviceHeader,
    dialogAction,
    ListPagination,
  },
  data() {
    return {
      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
      process_in_up: false, //是否是服务注册产生的流程服务
      perception_in: false, //是否是感知服务
      in_origin_ser: false, //是否是组织内部的服务
      buy_style: [1],
      // editstr:'<h1>1221312</h1>wuqwyequ827812731731',
      listTotal: 0,
      currentPage: 1,
      pageSize: 10,
      translistTotal: 0,
      transcurrentPage: 1,
      transpageSize: 10,
      pageSizes: [10, 20, 50],
      responseParamUrl: "",
      codeExampleUrl: "",
      port_select_server: "",
      yx_state: {
        state: "",
        averageTime: "",
        maxTime: "",
        averageTraffic: "",
        maxTraffic: "",
        memory: "",
      },
      port_select: "",
      service_use_arr: [],
      req_solt_data: [],
      res_solt_data: [],
      req_gz_solt_data: [],
      res_gz_solt_data: [],
      service_gz_process_arr: [],
      trans_all_obj: {
        all: 0,
        times: 0,
        month: 0,
      },
      jkwd_headers: [
        {
          prop: "wd_name",
          label: "文档名称",
          align: "left",
        },
        {
          label: "操作",
          type: "Button",
          align: "center",
          btnList: [
            {
              type: "download",
              label: "下载",
              disabledRule: true
            },
          ],
        },
      ],
      jkwd_datas: [],
      trans_log_arr: [
        {
          title: "服务交易概览",
          info: "",
          prop: "title",
          type: "solt",
          solt_name: "trans_all",
        },
        {
          title: "服务交易记录",
          info: "",
          prop: "title",
          type: "solt",
          solt_name: "trans_log",
        },
      ],
      trans_log_header: [
        {
          prop: "department_name",
          label: "申请单位",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "system_name",
          label: "业务系统",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "apply_username",
          label: "申请人",
          minWidth: "20%",
          align: "center",
        },
        {
          prop: "gg",
          label: "规格",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "duration_name",
          label: "购买时长",
          width: "110px",
          align: "center",
        },
        {
          prop: "total_moneys",
          label: "订单总价",
          width: "150px",
          align: "center",
        },
        {
          prop: "trade_times",
          label: "交易时间",
          width: "160px",
          align: "center",
        },
      ],
      trans_log_data: [],
      res_solt_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ], // 请求参数-header
      req_solt_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ], // 请求参数-header
      req_gz_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "is_must",
          label: "是否必须",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ], // 请求参数-header
      res_gz_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "is_must",
          label: "是否必须",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ], // 请求参数-header
      req_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "is_must",
          label: "是否必须",
          align: "center",
          width: 240,
        },
      ], // 请求参数-header
      req_data: [], // 请求参数
      req_code_arr: "", // 请求示例
      res_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          minWidth: "20%",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          width: "100px",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          minWidth: "30%",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          width: "120px",
          align: "center",
          width: 240,
        },
      ], // 响应参数-header
      res_data: [], // 响应参数
      res_code_arr: "", // 响应示例
      req_solt_code_arr: "11",
      res_solt_code_arr: "11",
      buy_type: "",
      workflows_id: "", //判断是否是流程服务
      sizeset_flag: false, //规格设置是否显示
      service_arr: [
        ["服务基本信息", "接口详细信息", "服务运行状态","接口文档"],
        [
          "服务基本信息",
          "接口详细信息",
          "服务运行状态",
          // "服务计费规则",
          // "服务交易记录",
          "接口文档"
        ],
        [
          "服务基本信息",
          "接口详细信息",
          "服务运行状态","接口文档"
          // "服务规格",
          // "服务交易记录",
        ],
      ],
      service_size_data: [], //服务规格数组
      service_header_arr: {
        id: "",
        isMap: false,
        isProcess: false,
        url: "",
        name: "",
        first: [
          {
            name: "服务分类",
            text: "",
          },
          {
            name: "申请次数",
            text: "",
          },
          {
            name: "调用次数",
            text: "",
          },
          {
            name: "服务状态",
            text: "",
          },
        ],
        second: [
          {
            name: "服务接口地址",
            text: "",
          },
        ],
        fixed: false,
        fixedurl: this.$route.path.replace("servicedetail", "serviceedit"),
      },
      now_service: 0,
      datas: {},
      header_use_arr: [
        {
          prop: "dydw",
          label: "调用单位",
          minWidth: "20%",
          align: "left",
        },
        // {
        //   prop: "dyr",
        //   label: "调用人",
        //   width: "100px",
        //   align: "center",
        // },
        {
          prop: "dyyw",
          label: "调用业务系统",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "ywxt",
          label: "业务系统网址",
          minWidth: "20%",
          align: "left",
        },
        // {
        //   prop: "cjms",
        //   label: "场景描述",
        //   minWidth: "40%",
        //   align: "left",
        // },
        // {
        //   prop: "sqgg",
        //   label: "申请规格",
        //   minWidth: "40%",
        //   align: "center",
        // },
        // {
        //   prop: "sqsc",
        //   label: "申请时长",
        //   minWidth: "40%",
        //   align: "center",
        // },
        {
          prop: "sqsj",
          label: "申请调用时间",
          width: "160px",
          align: "right",
        },
        {
          prop: "state",
          label: "调用状态",
          width: "160px",
          align: "right",
        },
      ],
      header_gz_process_arr: [
        {
          prop: "dyyw",
          label: "调用业务系统",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "dydw",
          label: "调用单位",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "ywxt",
          label: "业务系统网址",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "cjms",
          label: "场景描述",
          minWidth: "40%",
          align: "left",
        },
        {
          prop: "sqgg",
          label: "申请规格",
          minWidth: "40%",
          align: "center",
        },
        {
          prop: "sqsc",
          label: "申请时长",
          minWidth: "40%",
          align: "center",
        },
        {
          prop: "sqsj",
          label: "申请调用时间",
          width: "160px",
          align: "right",
        },
      ],
      header_process_arr: [
        {
          prop: "dydw",
          label: "调用单位",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "dyyw",
          label: "调用业务系统",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "ywxt",
          label: "业务系统网址",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "jkmc",
          label: "调用接口名称",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "jkdz",
          label: "调用接口地址",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "state",
          label: "调用状态",
          minWidth: "20%",
          align: "center",
        },
        {
          prop: "time",
          label: "调用时间",
          minWidth: "20%",
          align: "center",
        },
      ],
      service_process_arr: [],
      service_size_arr: [
        {
          prop: "index",
          label: "序号",
          width: "100px",
          align: "center",
        },
        {
          prop: "spcs_type_name",
          label: "规格类型",
          minWidth: "33.33%",
          align: "center",
        },
        {
          prop: "gg",
          label: "规格",
          minWidth: "33.33%",
          align: "center",
        },
        {
          prop: "time",
          label: "购买时长",
          width: "200px",
          align: "center",
        },
        {
          prop: "descript",
          label: "规格说明",
          minWidth: "33.33%",
          align: "left",
        },
      ],
      edit_size_arr: [
        {
          prop: "spcs_type",
          label:
            '规格类型<span title="计次收费规格：仅依据服务调用次数进行收费，不限时长。&#10;时长收费规格：按月为时间单位进行收费，每月使用次数不限。"><img style="margin-left:5px;vertical-align:-3px;" src="' +
            require("../../../assets/imgs/money_table_ico.png") +
            '" alt=""></span>',
          width: "180px",
          align: "center",
          type: "select",
          selectArr: [
            {
              label: "计次收费规格",
              value: 1,
            },
            {
              label: "时长收费规格",
              value: 2,
            },
          ],
        },
        {
          prop: "money",
          label: "价格/金币",
          width: "200px",
          align: "center",
          type: "inputMoney",
        },
        {
          prop: "pv",
          label:
            '调用次数<span title="该规格提供的服务调用次数。"><img style="margin-left:5px;vertical-align:-3px;" src="' +
            require("../../../assets/imgs/money_table_ico.png") +
            '" alt=""></span>',
          width: "150px",
          align: "center",
          type: "input",
        },
        {
          prop: "d_price",
          label: "单价",
          width: "150px",
          align: "left",
        },
        {
          prop: "time",
          label: "时长",
          width: "150px",
          align: "left",
        },
        {
          prop: "descript",
          label: "规格说明",
          minWidth: "33.33%",
          align: "left",
          type: "input",
        },
        {
          label: "操作",
          type: "Button",
          align: "center",
          width: 140,
          btnList: [
            {
              type: "action-delete",
              label: "删除",
              local: true,
            },
          ],
        },
      ],
      size_arr_down: [],
      servicead_arr: [
        {
          title: "请求方式：",
          info: "",
        },
        {
          title: "请求参数：",
          info: "",
          type: "solt",
          solt_name: "req_table",
        },
        {
          title: "请求示例：",
          info: "",
          type: "solt",
          solt_name: "req_code",
        },
        {
          title: "编码格式：",
          info: "",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "res_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "res_code",
        },
      ],
      process_in_up_arr: [
        {
          title: "接口文档：",
          info: "",
          url: "",
          type: "down",
        },
        {
          title: "服务接口：",
          info: "",
          type: "solt",
          solt_name: "service_port",
        },
      ],
      port_solt_arr: [
        {
          title: "服务地址：",
          info: "",
        },
        {
          title: "请求方式：",
          info: "",
        },
        {
          title: "编码格式：",
          info: "get",
        },
        {
          title: "请求参数：",
          info: "",
          type: "solt",
          solt_name: "request_table",
        },
        {
          title: "请求示例：",
          info: "",
          type: "solt",
          solt_name: "request_code",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "response_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "response_code",
        },
      ],
      gz_solt_arr: [
        {
          title: "请求方式：",
          info: "12123",
        },
        {
          title: "编码格式：",
          info: "get",
        },
        {
          title: "请求参数：",
          info: "",
          type: "solt",
          solt_name: "request_table",
        },
        {
          title: "请求示例：",
          info: "",
          type: "solt",
          solt_name: "request_code",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "response_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "response_code",
        },
      ],
      port_options: [],
      service_type_arr: [
        "基础支撑服务",
        "基础地图服务",
        "视频图像服务",
        "感知服务",
        "执法办案服务",
      ],
      scrvice_area_arr: [
        "经济建设",
        "城市建设",
        "道路交通",
        "环境资源",
        "服务民生",
        "空间地理",
        "文化休闲",
        "社会团体",
        "教育机构",
        "其他",
      ],
      open_arr: ["共享", "受限", "敏感"],
      service_state_arr: ["已下架", "已上架", "审核中", "审核中"],
      request_arr: ["GET", "POST", "PUT", "DELETE"],
      list_arr: [
        {
          title: "服务描述：",
          info: "",
        },
        {
          title: "业务领域：",
          info: "",
        },
        {
          title: "所属组织：",
          info: "",
        },
        {
          title: "开放程度：",
          info: "",
        },
        {
          title: "接口编码：",
          info: "",
        },
        {
          title: "注册发布时间：",
          info: "",
        },
      ],
      cp_arr: [
        {
          title: "产品简介：",
          info: "",
        },
        {
          title: "产品领域：",
          info: "",
        },
        {
          title: "产品标签：",
          info: "",
        },
        {
          title: "所属组织：",
          info: "",
        },
        {
          title: "开放程度：",
          info: "",
        },
        {
          title: "注册发布时间：",
          info: "",
        },
        {
          title: "产品详情：",
          type: "solt",
          solt_name: "cp_md",
          item: "",
        },
      ],
      data_service_type1: "",
    };
  },
  computed: {
    ...mapGetters(["level"]),
    ...mapState(["userInfo"]),
  },
  watch: {
    now_service(n, o) {
      if (n == 2) {
        this.getData();
      }
    },
  },
  created() {
    if (this.userInfo) {
      this.now_user = this.level;
      if (this.now_user == 1 || this.now_user == 2) {
        this.in_origin_ser = true;
      } else {
        this.in_origin_ser = false;
      }
    } else {
      this.getCurrentUser();
    }
    this.getServiceInfo();
    this.getServiceyxztInfo();
    this.get_use_list();
  },
  mounted() {},
  methods: {
    download(row) {
      console.log(row.url)
      const a = document.createElement("a"); // 创建a标签
      a.setAttribute("download", ""); // download属性
      a.setAttribute("href", row.url); // href链接
      a.click(); // 自执行点击事件
    }, // 下载接口文档

    change_port(val) {
      this.port_options.forEach((e) => {
        if (e.value == val) {
          this.$set(this.port_solt_arr[0], "info", e.value);
          this.$set(this.port_solt_arr[1], "info", e.req_type);
          this.$set(this.port_solt_arr[2], "info", e.encode_method);
          this.req_solt_data = e.req_fields;
          this.res_solt_data = e.res_fields;
          this.req_solt_code_arr = e.req_fields_example;
          this.res_solt_code_arr = e.res_fields_example;
        }
      });
    },
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;
      this.get_use_list();
    },
    transchangePageSize(value) {
      this.transpageSize = value;
      this.transcurrentPage = 1;
      this.get_trans_data();
    },
    changeCurrentPage(value) {
      this.currentPage = value;
      this.get_use_list();
    },
    transchangeCurrentPage(value) {
      this.transcurrentPage = value;
      this.get_trans_data();
    },
    iconChange(val) {
      // el-select实际上是两层div包裹的input
      this.port_select_server = val;
      // 获取当前el-select标签第一层div
      const dom = this.$refs["select_icon"].$el;
      if (dom.children[0].children[0].tagName == "SPAN") {
        dom.children[0].children[0].remove();
      }
      // 创建需要添加到其中的标签 并填充内容
      const svgDom = document.createElement("span"); // ('<svg-icon ref="iconRef" icon-class="' + val + '" style="float: left;width: 3%;height: 30px;border: 1px solid #dcdfe6;border-right:none;" />');
      svgDom.setAttribute("class", "el-input__prefix");
      if (val.split(",")[1] == "true") {
        svgDom.innerHTML =
          '<span class="el-input__prefix-inner" style="margin-top:15px;margin-left:10px;display:inline-block;width:0px;height:18px;border-radius:4px;"></span>';
      } else {
        svgDom.innerHTML =
          '<span class="el-input__prefix-inner" style="margin-top:10px;margin-left:10px;display:inline-block;width:36px;color:#fff;height:18px;border-radius:4px;background-color:#e15260;">故障</span>';
      }
      // 将创建的标签添加到父节点(第二层div)
      dom.children[0].appendChild(svgDom);
      // 得到el-select中的input标签
      const inputDom = dom.children[0].children[0];
      inputDom.setAttribute("style", "padding-left: 60px;");
      // 将添加的标签放到input前面
      dom.children[0].insertBefore(svgDom, inputDom);

      this.getData();
    },
    get_use_list() {
      this.service_use_arr = [];
      this.$http
        .get(
          `/apaas/service/v3/service/manager/service/applys?service_id=${this.$route.params.id}&page=${this.currentPage}&size=${this.pageSize}`
        )
        .then((response) => {
          console.log(response);
          if (response.data.success) {
            this.listTotal = response.data.data.total;
            let data = response.data.data.data || [];
            console.log(data)
            data.forEach((e) => {
              this.service_use_arr.push({
                dydw: e.apply_org_name,
                dyr: e.apply_user_info ? e.apply_user_info.user_name : "",
                dyyw: e.business_name,
                ywxt: e.business_url,
                cjms: e.scene,
                sqsj: e.apply_time || "-",
                sqgg: e.request_spcs
                  ? `访问次数：${e.request_spcs.count}/日 访问量：${e.request_spcs.pv}/日`
                  : "",
                sqsc: e.duration + ["", "个月", "年"][e.duration_unit || 0],
                jkmc: e.req_name || "",
                jkdz: e.req_url || "",
                state:
                  e.req_status || e.req_status == 0
                    ? e.req_status == -1
                      ? "失败"
                      : "成功"
                    : "",
                time: e.last_request_time || "-",
                count: e.req_num || "-",
              });
            });
            console.log(this.service_use_arr)
          }
        })
        .catch(function (response) {});
    },
    change_buy(val) {
      if (this.buy_style.indexOf(val) !== -1) {
        this.buy_style.splice(this.buy_style.indexOf(val), 1);
      } else {
        this.buy_style.push(val);
      }
    },
    getCurrentUser() {
      this.$api.user.getNowUser().then(({ data }) => {
        if (data.success == 1) {
          this.$store.commit("userInfofun", data.data);
          this.now_user = this.level;
          if (this.now_user == 1 || this.now_user == 2) {
            this.in_origin_ser = true;
          } else {
            this.in_origin_ser = false;
          }
          console.log(this.level);
        } else {
          console.log(data.errMsg);
        }
      });
    },
    getData() {
      this.$api.workbench
        .getServiceRunningTopology({ service_id: this.$route.params.id })
        .then((response) => {
          this.datas = response.data.elements;
        });
    },
    get_trans_data() {
      this.$http
        .get(
          `/apaas/service/v3/service/manager/service/trade/list?page=${this.currentPage}&size=${this.pageSize}&service_id=${this.$route.params.id}`
        )
        .then((res) => {
          console.log(res);
          // listTotal: 0,
          if (res.data.success) {
            this.translistTotal = res.data.data.total;
            var temp = res.data.data.list || [];
            temp.forEach((e) => {
              if (e.spcs_type == 1) {
                e.duration_name = "不限时长";
                e.gg = `${e.spcs_count}次/ ${e.single_money} 元`;
              } else if (e.spcs_type == 2) {
                e.duration_name = e.duration + "月";
                e.gg = `${e.single_money} 元/月`;
              }
              e.trade_times = helper.dateStringTransform(e.trade_time);
              e.total_moneys = e.total_money + "金币";
            });
            this.trans_log_data = temp;
          }
        });
    },
    getServiceInfo() {
      this.$http
        .get(
          "/apaas/service/v3/service/manager?service_id=" +
            this.$route.params.id
        )
        .then((response) => {
          if (response.data.success === 1) {
            let data = response.data.data;
            this.namespace = data.urls[0].namespace;
            if (data.workflows_id) {
              this.workflows_id = data.workflows_id;
            } else {
              this.workflows_id = false;
            }
            this.$set(this.service_header_arr, "portal_id", data.portal_id); // 基础地图服务id
            this.$set(
              this.service_header_arr,
              "workflows_id",
              data.workflows_id
            ); // 基础地图服务id
            this.$set(
              this.service_header_arr,
              "isMap",
              data.data_service_type1 === 6
            );
            this.$set(
              this.service_header_arr,
              "isProcess",
              data.data_service_type2 === 24
            );
            this.$set(this.service_header_arr, "name", data.name);
            this.$set(
              this.service_header_arr["first"][0],
              "text",
              data.data_service_type1_name
            );
            this.$set(
              this.service_header_arr["first"][1],
              "text",
              data.apply_count
            );
            this.$set(
              this.service_header_arr["first"][2],
              "text",
              data.request_count
            );
            this.$set(
              this.service_header_arr["first"][3],
              "text",
              this.service_state_arr[data.state]
            );
            this.$set(
              this.service_header_arr["second"][0],
              "text",
              data.urls[0].req_url
            );
            this.$set(this.service_header_arr, "url", data.cover);
            if (this.now_user != 1) {
              this.$set(this.service_header_arr, "fixed", true);
            }
            this.$set(
              this.service_header_arr,
              "fixedurl",
              this.$route.path.replace("servicedetail", "serviceedit")
            );
            this.trans_all_obj = {
              all: data.sale_total_money,
              times: data.sale_total,
              month: data.sale_month_total,
            };
            //判断是否是服务注册出来的流程服务
            if (data.data_service_type2 == 24 && data.workflows_id == 0) {
              this.process_in_up = true;
              this.$set(
                this.process_in_up_arr[0],
                "info",
                data.doc_file.split("/")[data.doc_file.split("/").length - 1]
              );
              this.$set(this.process_in_up_arr[0], "url", data.doc_file);
              var temp_port_arr = [];
              data.urls.forEach((e) => {
                temp_port_arr.push({
                  label: e.req_name,
                  value: e.req_url,
                  able: e.state == -1 ? false : true,
                  ...e,
                });
              });
              this.port_options = temp_port_arr;
              if (this.port_options[0]) {
                this.port_select = this.port_options[0].value;
                this.$set(
                  this.port_solt_arr[0],
                  "info",
                  this.port_options[0].value
                );
                this.$set(
                  this.port_solt_arr[1],
                  "info",
                  this.port_options[0].req_type
                );
                this.$set(
                  this.port_solt_arr[2],
                  "info",
                  this.port_options[0].encode_method
                );
                this.req_solt_data = this.port_options[0].req_fields;
                this.res_solt_data = this.port_options[0].res_fields;
                this.req_solt_code_arr = this.port_options[0].req_fields_example;
                this.res_solt_code_arr = this.port_options[0].res_fields_example;
              }
            } else {
              this.process_in_up = false;
            }

            if (data.service_data_type_1 == 10) {
              this.perception_in = true;
              this.$set(this.gz_solt_arr[0], "info", data.urls[0].req_url);
              this.$set(
                this.gz_solt_arr[1],
                "info",
                data.urls[0].encode_method
              );
              this.req_gz_solt_data = data.urls[0].req_fields;
              this.res_gz_solt_data = data.urls[0].res_fields;
              this.req_solt_code_arr = data.urls[0].req_fields_example;
              this.res_solt_code_arr = data.urls[0].res_fields_example;
            } else {
              this.perception_in = false;
            }
            console.log(this.process_in_up, this.perception_in);
            this.get_trans_data();
            if (data.data_service_type1 == 36) {
              this.$set(this.service_header_arr, "second", []);
            }
            if (this.process_in_up) {
              var temp_sj = this.service_header_arr.first.pop();
              this.service_header_arr.second = [];
              this.service_header_arr.second.push(temp_sj);
            }
            this.$set(this.list_arr[0], "info", data.descript);
            this.$set(this.list_arr[1], "info", data.sectors_name);
            this.$set(this.list_arr[2], "info", data.organization_name);
            this.$set(this.list_arr[3], "info", data.openness_name);
            this.$set(this.list_arr[4], "info", "自动生成");
            let str = data.create_time.replace("T", " ").split("+")[0];
            str = str.replace("Z", " ").split("+")[0];
            this.$set(this.list_arr[5], "info", str);
            this.$set(this.cp_arr[0], "info", data.descript);
            this.$set(this.cp_arr[1], "info", data.sectors_name);
            let strtags = "";
            if (data.tags && data.tags.length != 0) {
              data.tags.forEach((item) => {
                strtags += item + "  ";
              });
            }
            this.$set(this.cp_arr[2], "info", strtags);
            this.$set(this.cp_arr[3], "info", data.organization_name);
            this.$set(this.cp_arr[4], "info", data.openness_name);
            this.$set(this.cp_arr[5], "info", str);
            this.data_service_type1 = data.data_service_type1;
            if (this.data_service_type1 == "36") {
              this.service_arr[0][0] = "产品基本信息";
              this.service_arr[0][1] = "";
              this.service_arr[0][2] = "";
              this.service_arr[1][0] = "产品基本信息";
              this.service_arr[1][1] = "";
              this.service_arr[1][2] = "";
              // this.service_arr[1][3] = "产品计费规则";
              // this.service_arr[1][4] = "产品交易记录";
              this.service_arr[2][0] = "产品基本信息";
              this.service_arr[2][1] = "";
              this.service_arr[2][2] = "";
              // this.service_arr[2][3] = "产品规格";
              // this.service_arr[2][4] = "产品交易记录";
              this.getMd(data.doc_file);
            }
            // console.log(this.service_arr)
            // 接口详情信息
            this.$set(
              this.servicead_arr[0],
              "info",
              this.request_arr[data.urls[0].req_type - 1]
            ); // 请求方式
            this.req_data = JSON.parse(
              data.urls[0].req_fields || data.urls[0].req_query || "[]"
            ); // 请求参数
            if (this.req_data && this.req_data.length === 0) {
              this.$set(this.servicead_arr[1], "type", "");
              this.$set(this.servicead_arr[1], "info", "无请求参数");
            }
            this.req_code_arr =
              data.urls[0].req_fields_example ||
              data.urls[0].req_query_example ||
              ""; // 请求示例
            if (!this.req_code_arr) {
              this.$set(this.servicead_arr[2], "type", "");
              this.$set(this.servicead_arr[2], "info", "无请求示例");
            }
            this.$set(
              this.servicead_arr[3],
              "info",
              data.urls[0].encode_method
            ); // 编码格式
            this.res_data = JSON.parse(data.urls[0].res_fields || "[]"); // 响应参数
            if (this.res_data && this.res_data.length === 0) {
              this.$set(this.servicead_arr[4], "type", "");
              this.$set(this.servicead_arr[4], "info", "无响应参数");
            }
            console.log(data.urls[0].res_fields_example);
            this.res_code_arr = data.urls[0].res_fields_example || ""; // 响应示例
            console.log(this.res_code_arr);
            if (!this.res_code_arr) {
              this.$set(this.servicead_arr[5], "type", "");
              this.$set(this.servicead_arr[5], "info", "无响应示例");
            }
            // 接口详情信息 end
            var temp = data.request_spcs_info || [];
            temp.forEach((e, idx) => {
              e.index = idx + 1;
              if (e.spcs_type == 1) {
                e.gg = e.money + "金币/" + e.spcs_count + "次";
                e.time = "不限时长";
                e.pv = e.spcs_count;
                e.d_price = e.money / e.spcs_count + "金币/次";
                e.spcs_type_name = "计次收费";
              } else if (e.spcs_type == 2) {
                e.gg = e.money + "金币/月";
                e.time = "1个月";
                e.pv = "不限次数";
                e.d_price = "-";
                e.spcs_type_name = "计时收费";
              }
            });
            this.service_size_data = temp;
            this.size_arr_down = temp;
            if (data.doc_file != '') {
              this.jkwd_datas.push({
                wd_name: helper.downloadFileFormat(data.doc_file),
                url: data.doc_file
              })
            }
          } else {
            this.$message({
              message: response.data.errMsg,
              type: "warning",
            });
          }
        })
        .catch(function (response) {});
    },
    getMd(url) {
      if (url == "") {
        this.cp_arr[6].item = "无";
      } else {
        this.$http
          .get(url)
          .then((response) => {
            this.cp_arr[6].item = response.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    now_size_data(val) {
      console.log(val);
      val.forEach((e) => {
        if (e.spcs_type == 1) {
          if (e.pv == "不限次数") {
            e.pv = "";
            e.time = "";
            e.descript = "";
            e.money = "";
            e.d_price = "";
          }
          e.time = "不限时长";
          e.descript = "提供" + e.pv + "次服务，时长不限";
          if (e.money && e.pv) {
            e.d_price = parseInt(e.money / e.pv) + "金币/次";
          }
        } else if (e.spcs_type == 2) {
          e.pv = "不限次数";
          e.d_price = "-";
          e.time = "按月";
          e.descript = "每月不限调用次数";
        }
      });
      this.size_arr_down = val;
    },
    getsize_arr() {
      this.$http
        .get(
          "/apaas/service/v3/service/manager/request/spcs/list?service_id=" +
            this.$route.params.id
        )
        .then((response) => {
          let data = response.data.data;
          console.log(data);
          var temp = data.data || [];
          temp.forEach((e, idx) => {
            e.index = idx + 1;
            // if(e.spcs_type==1){
            //   e.gg = e.money+'/'+e.spcs_count
            //   e.time = '不限时长'
            //   e.pv = e.spcs_count
            //   e.d_price = ''
            // }else if(e.spcs_type==1){
            //   e.gg = e.money+'/月'
            //   e.time = '1个月'
            //   e.pv = '不限次数'
            //   e.d_price = '-'
            // }

            if (e.spcs_type == 1) {
              e.gg = e.money + "金币/" + e.spcs_count + "次";
              e.time = "不限时长";
              e.pv = e.spcs_count;
              e.d_price = e.money / e.spcs_count + "金币/次";
              e.spcs_type_name = "计次收费";
            } else if (e.spcs_type == 2) {
              e.gg = e.money + "金币/月";
              e.time = "1个月";
              e.pv = "不限次数";
              e.d_price = "-";
              e.spcs_type_name = "计时收费";
            }
          });
          this.service_size_data = temp;
        })
        .catch(function (response) {});
    },
    change_service_size() {
      let temp = [];

      this.size_arr_down.forEach((e) => {
        if (e.pv && e.money && e.spcs_type) {
          e.id = 0;
          delete e.undefined;
          delete e.flag;
          e.spcs_count = e.spcs_type == 1 ? parseInt(e.pv) : 0;
          e.money = parseFloat(e.money);
          e.duration = 1;
          e.duration_unit = 1;
          temp.push(e);
        }
      });
      console.log(this.size_arr_down);
      this.$http
        .post("/apaas/service/v3/service/manager/request/spcs/save", {
          service_id: parseInt(this.$route.params.id),
          data: temp,
        })
        .then((response) => {
          console.log(response);
          if (response.data.success) {
            this.$message.success("保存成功");
            this.sizeset_flag = false;
            this.getsize_arr();
          } else {
            this.$message.error(response.data.errMsg);
          }
        });
    },

    getServiceyxztInfo() {
      this.$http
        .get(
          `/apaas/istio/service/apaas-proxy/overview/apaas-proxy-${this.$route.params.id}`
        )
        .then((response) => {
          if (response.data.success) {
            let data = response.data.data;
            this.yx_state = {
              state: data.appState == "running" ? "运行中" : "等待中",
              averageTime: data.respTime.avg + "ms",
              maxTime: data.respTime.max + "ms",
              averageTraffic: data.throughput.avg + "dps",
              maxTraffic: data.throughput.max + "dps",
              memory: data.resource.memory + "MB",
            };
          }
        })
        .catch((response) => {
          this.yx_state = {
            state: "停止",
            averageTime: "0ms",
            maxTime: "0ms",
            averageTraffic: "0dps",
            maxTraffic: "0dps",
            memory: "0MB",
          };
        });
    },
  },
};
</script>

<style>
.savebtn .el-button {
  float: right;
  margin-left: 20px;
  letter-spacing: 2px;
}
.savebtn .el-button:nth-of-type(1) {
  background-color: #0f2683;
  color: #f8f9fd;
}
.savebtn .el-button:nth-of-type(2) {
  background-color: #c3caf8;
  color: #0f2683;
}
.service_port .el-input__inner {
  width: 785px;
  background-color: #f7f8f9;
}
</style>
<style scoped>
.detail_contain {
  width: 100%;
  padding: 0 20px;
  height: calc(100% - 55px);
}
.info_contain {
  padding: 25px 20px;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
  min-height: calc(100% - 20px);
  margin-bottom: 20px;
}
.now_page_title {
  margin: 15px 0;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
}
.type_box {
  width: 100%;
}
.type_title {
  width: 100%;
  height: 65px;
  line-height: 65px;
  border-bottom: 2px solid #f4f7fc;
}
.type_select {
  float: left;
  width: auto;
  margin-right: 40px;
  height: 65px;
  cursor: pointer;
}
.type_box_select {
  padding: 30px 10px 10px 10px;
  width: 100%;
}
.type_box_select >>> .outlist .list p {
  word-wrap: break-word;
}
.service_title {
  font-size: 16px;
  font-weight: bold;
  color: #58617a;
  text-align: left;
  height: 40px;
  line-height: 40px;
  margin-top: -10px;
  margin-bottom: 20px;
}
.service_title span {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #515fe7;
  border-radius: 2px;
  float: left;
  margin-top: 13px;
  margin-right: 15px;
}
.service_title_card {
  width: 100%;
  overflow: hidden;
}
.service_card {
  width: calc((100% - 120px) / 4);
  margin-right: 40px;
  float: left;
}
.service_title_card .service_card:nth-last-of-type(1) {
  margin-right: 0px;
}
.service_num {
  text-align: center;
  padding-top: 10px;
}
.service_num p:nth-of-type(1) {
  font-size: 36px;
  color: #3f4f9c;
  margin-bottom: 10px;
}
.service_num p:nth-of-type(2) {
  font-size: 16px;
  color: #58617a;
}
.service_card_charts {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
}
.editbtn {
  width: 124px;
  height: 44px;
  line-height: 44px;
  background-color: #0f2683;
  border-radius: 8px;
  font-size: 16px;
  color: #f8f9fd;
  text-align: center;
  cursor: pointer;
  margin-bottom: 30px;
  margin-top: 20px;
}
.savebtn {
  margin-top: 50px;
  overflow: hidden;
}
.port_bg_box {
  width: 100%;
  min-height: 100px;
  background-color: #f8f9fd;
  border-radius: 8px;
  margin-top: 10px;
  padding: 20px 30px;
}
.trans_all {
  width: 100%;
  height: 128px;
  background-color: #fbfcfe;
  border-radius: 12px;
}
.trans_all .trans_box {
  width: 33.3%;
  float: left;
  height: 65px;
  line-height: 65px;
  margin-top: 30px;
  border-right: 2px solid #e6ebfe;
}
.trans_all .trans_box:nth-last-of-type(1) {
  border: 0;
}
.trans_middle {
  width: 200px;
  height: 65px;
  line-height: 65px;
  margin: 0 auto;
  position: relative;
  text-align: right;
}
.trans_middle img {
  position: absolute;
  left: 0;
  top: 15px;
}
.trans_middle span {
  position: absolute;
  right: -20px;
  top: 18px;
  font-size: 16px;
  color: #242c43;
}
.trans_middle p {
  font-size: 16px;
  line-height: 32px;
  color: #58617a;
}
.trans_middle p:nth-of-type(2) {
  font-size: 24px;
  font-weight: bold;
  color: #242c43;
}
.trans_all .trans_box:nth-of-type(1) .trans_middle span {
  right: -40px;
}
.trans_log {
  width: 100%;
}
.topology {
  height: 500px;
}
</style>
