<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card" style="flex:1;">
        <div class="block-container" style="margin-bottom:20px">
          <div class="row">
            <div class="col">
              <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                <div slot="content">
                  <i class="dot" />
                  <span>{{ digitsObj.total !=undefined? digitsObj.total:0 }}</span>
                </div>
                <div class="border-bottom">
                  <div class="block-box px-3 py-4">
                    <div class="col-tit">请求数</div>
                    <div class="col-con">{{ digitsObj.total !=undefined? digitsObj.total:0 }}</div>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <div class="col">
              <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                <div slot="content">
                  <i class="dot" />
                  <span>{{ (digitsObj.error_rate*100).toFixed(2) || 0 }}</span>
                </div>
                <div class="border-bottom">
                  <div class="block-box px-3 py-4">
                    <div class="col-tit">错误率</div>
                    <div class="col-con">{{ digitsObj.error_rate && (digitsObj.error_rate*100).toFixed(2) || 0 }} %</div>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <div class="col">
              <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                <div slot="content">
                  <i class="dot" />
                  <span>{{ digitsObj.qpm!=undefined?digitsObj.qpm:0 }}</span>
                </div>
                <div class="border-bottom">
                  <div class="block-box px-3 py-4">
                    <div class="col-tit">请求频率/min</div>
                    <div class="col-con">{{ digitsObj.qpm!=undefined?Number(digitsObj.qpm).toFixed(2):0 }}</div>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <div class="col">
              <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                <div slot="content">
                  <i class="dot" />
                  <span>{{ digitsObj.median_duration != undefined?digitsObj.median_duration:0 }}</span>
                </div>
                <div class="border-bottom">
                  <div class="block-box px-3 py-4">
                    <div class="col-tit">中位时延 ms</div>
                    <div class="col-con">{{ digitsObj.median_duration != undefined?Number(digitsObj.median_duration).toFixed(2):0 }}</div>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <div class="col">
              <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                <div slot="content">
                  <i class="dot" />
                  <span>{{ digitsObj.max_duration != undefined?digitsObj.max_duration:0 }}</span>
                </div>
                <div class="border-bottom">
                  <div class="block-box px-3 py-4">
                    <div class="col-tit">最大时延 (ms)</div>
                    <div class="col-con">{{ digitsObj.max_duration != undefined?Number(digitsObj.max_duration).toFixed(2):0 }}</div>
                  </div>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>

        <div class="search-box">
          <el-form ref="subListQuery" :model="subListQuery" :inline="true" label-width="68px" @submit.native.prevent>
            <el-form-item label="" prop="url">
              <el-input
                v-model.trim="subListQuery.url"
                style="width:300px;"
                placeholder="请输入url"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
                @clear="handleQuery"
              />
            </el-form-item>

            <el-form-item label="" prop="service_name">
              <el-select
                v-model="subListQuery.service_name"
                placeholder="请选择服务"
                clearable
                filterable
                value-key="id"
                size="mini"
                @change="handChange"
              >
                <el-option
                  v-for="item in serviceList"
                  :key="item.id"
                  :label="item.service_name_cn"
                  :value="item.service_name"
                />
              </el-select>
            </el-form-item>

          </el-form>
          <div class="search-box-right">
            <el-upload
              ref="upload"
              class="comp-start-upload"
              drag
              action="#"
              :auto-upload="false"
              :multiple="false"
              :show-file-list="false"
              accept=".xls, .xlsx"
              :on-change="handelUpload"
            >
              <el-button size="mini" icon="el-icon-upload2" type="primary">上传Excel</el-button>
            </el-upload>
            <el-dropdown
              style="margin-left: 10px"
              size="mini"
              trigger="click"
              placement="bottom"
            >
              <el-button type="primary" size="mini">
                <!-- 下拉菜单 -->
                <i class="el-icon-s-grid" />
                <i class="el-icon-arrow-down" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-checkbox-group
                  v-model="colSelect"
                  style="text-align: left"
                  @change="columnChange"
                >
                  <el-dropdown-item
                    v-for="(item, index) in colData"
                    :key="index"
                  ><el-checkbox :label="item.title">{{
                    item.title
                  }}</el-checkbox></el-dropdown-item>
                </el-checkbox-group>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>

        <div class="TableBox">
          <el-table
            v-loading="loading"
            :data="subList"
            @row-click="handleRowClick"
          >
            <el-table-column v-if="colData[0].istrue" header-align="center" label="接口名" prop="name" align="center" :show-overflow-tooltip="true" />
            <el-table-column v-if="colData[1].istrue" header-align="center" label="服务名称" prop="service_name_cn" align="center" :show-overflow-tooltip="true" />
            <el-table-column v-if="colData[2].istrue" header-align="center" label="方法" prop="method" align="center" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-tag type="info" v-show="scope.row.method">{{ scope.row.method }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column v-if="colData[3].istrue" header-align="center" label="URL" prop="route" align="center" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.route }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="colData[4].istrue" header-align="center" label="所属模块" prop="module" align="center" :show-overflow-tooltip="true" />
            <el-table-column v-if="colData[5].istrue" header-align="center" label="请求总数" sortable prop="total" align="right" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div :class="scope.row.total!=0&&scope.row.total!= undefined?'table_bg':'table_bg_yellow'">
                  {{ scope.row.total== undefined?0:Number(scope.row.total) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="colData[6].istrue" header-align="center" label="错误率" sortable prop="error_rate" align="right" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.error_rate == 0 ? 0 :(scope.row.error_rate && scope.row.error_rate*100).toFixed(2)+ '%' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="colData[7].istrue" header-align="center" label="业务概述" prop="summary" align="center" :show-overflow-tooltip="true" />
            <!-- <el-table-column v-if="colData[8].istrue" header-align="center" label="中位延迟" prop="p50" align="center" width="200">
              <template slot-scope="scope">
                <span v-if="scope.row.duration_stats!=undefined" style="display:flex;">
                  {{ drawEchartsp5(scope.row, scope.$index, 'five') }}
                  <div :id="`tiger-five-trend-index` + scope.$index" style="flex:1;padding-left:10px" class="tiger-trend-charts" />
                  <el-popover trigger="hover" placement="top">
                    {{ scope.row.duration_stats.p50!= undefined&&scope.row.duration_stats.p50.length>0?timeConversion(scope.row.duration_stats.p50[scope.row.duration_stats.p50.length-1]):'' }}
                    <div slot="reference" class="name-wrapper">
                      <div class="P_box">{{ scope.row.duration_stats.p50!= undefined&&scope.row.duration_stats.p50.length>0?timeConversion(scope.row.duration_stats.p50[scope.row.duration_stats.p50.length-1]):'' }}</div>
                    </div>
                  </el-popover>
                </span>
              </template>
            </el-table-column> -->
            <!-- <el-table-column v-if="colData[9].istrue" header-align="center" label="90分位延迟" prop="p90" align="center" width="200">
              <template slot-scope="scope">
                <span v-if="scope.row.duration_stats!=undefined" style="display:flex;">
                  {{ drawEchartsp90(scope.row, scope.$index, 'nine') }}
                  <div :id="`tiger-nine-trend-index` + scope.$index" style="flex:1;padding-left:10px" class="tiger-trend-charts" />
                  <el-popover trigger="hover" placement="top">
                    {{ scope.row.duration_stats.p90!= undefined&&scope.row.duration_stats.p90.length>0?timeConversion(scope.row.duration_stats.p90[scope.row.duration_stats.p90.length-1]):'' }}
                    <div slot="reference" class="name-wrapper">
                      <div class="P_box">{{ scope.row.duration_stats.p90!= undefined&&scope.row.duration_stats.p90.length>0?timeConversion(scope.row.duration_stats.p90[scope.row.duration_stats.p90.length-1]):'' }}</div>
                    </div>
                  </el-popover>
                </span>
              </template>
            </el-table-column>
            <el-table-column v-if="colData[10].istrue" header-align="center" label="99分位延迟" prop="p99" align="center" width="200">
              <template slot-scope="scope">
                <span v-if="scope.row.duration_stats!=undefined" style="display:flex;">
                  {{ drawEchartsp99(scope.row, scope.$index, 'hundred') }}
                  <div :id="`tiger-hundred-trend-index` + scope.$index" style="flex:1;padding-left:10px" class="tiger-trend-charts" />
                  <el-popover trigger="hover" placement="top">
                    {{ scope.row.duration_stats.p99!= undefined&&scope.row.duration_stats.p99.length>0?timeConversion(scope.row.duration_stats.p99[scope.row.duration_stats.p99.length-1]):'' }}
                    <div slot="reference" class="name-wrapper">
                      <div class="P_box">{{ scope.row.duration_stats.p99!= undefined&&scope.row.duration_stats.p99.length>0?timeConversion(scope.row.duration_stats.p99[scope.row.duration_stats.p99.length-1]):'' }}</div>
                    </div>
                  </el-popover>
                </span>
              </template>
            </el-table-column> -->
            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
              prop="favor"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click.native.stop="handleUpdate(scope.row)"
                >标注</el-button>
                <el-button
                  v-if="scope.row.favor == 0"
                  size="mini"
                  type="text"
                  icon="el-icon-star-off"
                  @click.native.stop="handleFavor(scope.row)"
                />
                <el-button
                  v-if="scope.row.favor == 1"
                  size="mini"
                  type="text"
                  icon="el-icon-star-on"
                  @click.native.stop="handleFavor(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="subListQuery.pageIndex"
            :limit.sync="subListQuery.pageSize"
            @pagination="getUrlMappingSublist"
          />
        </div>

        <!-- 添加或修改应用配置对话框 -->
        <el-dialog v-if="open" :title="title" :visible.sync="open" width="700px" :center="true" :close-on-click-modal="false">
          <el-form ref="form" :model="form" :rules="rules" label-width="95px">
            <el-form-item label="业务定义" prop="name">
              <el-input v-model="form.name" placeholder="请输入业务定义" />
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <el-radio-group v-model="form.type">
                <el-radio label="1">对外</el-radio>
                <el-radio label="2">对内</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="所属模块" prop="module">
              <el-input v-model="form.module" placeholder="所属模块" />
            </el-form-item>
            <el-form-item label="业务概述" prop="summary">
              <el-input v-model="form.summary" type="textarea" placeholder="请输入业务概述" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </el-card>
    </template>
  </BasicLayout>
</template>
<script>
import { urlMappingSubdigits, urlMappingSublist, updateUrlMapping, addUrlMapping, getUrlMapping, favor, uploadExcel } from '@/api/mapping'
import storage from '@/utils/storage'
import { fatchServiceList } from '@/api/service'
export default {
  data() {
    return {
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      isEdit: false,
      // 表单参数
      form: {
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '接口名称不能为空', trigger: 'blur' }
        ]
        // url: [
        //   { required: true, message: 'URL前缀不能为空', trigger: 'blur' }
        // ]
      },
      // 设置选中的列的复选框
      colSelect: [
        '接口名',
        'URL',
        '请求总数',
        '错误率',
        '服务名称',
        '方法'
        // '中位延迟',
        // '90分位延迟',
        // '99分位延迟'

      ],
      colData: [
        { title: '接口名', istrue: false },
        { title: '服务名称', istrue: false },
        { title: '方法', istrue: false },
        { title: 'URL', istrue: false },
        { title: '所属模块', istrue: false },
        { title: '请求总数', istrue: false },
        { title: '错误率', istrue: false },
        { title: '业务概述', istrue: false }
        // { title: '中位延迟', istrue: false },
        // { title: '90分位延迟', istrue: false },
        // { title: '99分位延迟', istrue: false }
      ],
      loading: false,
      timer: null,
      digitsObj: {},
      subdigitsQuery: {
        start_time: 0,
        end_time: 0,
        app_alias: ''
        // id: undefined
      },
      subListQuery: {
        start_time: 0,
        end_time: 0,
        // id: undefined,
        url: '',
        pageIndex: 1,
        pageSize: 10,
        app_alias: '',
        service_name: ''
      },
      serviceParams: {
        app_alias: '',
        start_time: '',
        end_time: ''
      },
      total: 0,
      subList: [],
      appItem: {},
      name: '',
      myChartList: [],
      myChartboxList: [],
      myChartBox2List: [],
      serviceList: []
    }
  },
  watch: {
    '$store.state.time.globalTimes': {
      handler(newValue, oldValue) {
        if (newValue) {
          this.serviceParams.start_time = newValue.startTime
          this.serviceParams.end_time = newValue.endTime

          this.subdigitsQuery.start_time = newValue.startTime
          this.subdigitsQuery.end_time = newValue.endTime

          this.subListQuery.start_time = newValue.startTime
          this.subListQuery.end_time = newValue.endTime
          this.getUrlMappingSubdigits()// 获取上面统计数
          this.getServiceList() // 获取服务列表select
          this.getUrlMappingSublist() // 获取table数据

          if (newValue.timeOut) {
            if (newValue.timeOut == 1) {
              clearInterval(this.timer)
            } else {
              clearInterval(this.timer)
              this.Refresh(newValue.timeOut)
            }
          }
        }
      },
      // immediate: true,
      deep: true
    }
  },
  created() {
    this.appItem = storage.get('appsItem')
    const start_time = this.$store.state.time.globalTimes.startTime
    const end_time = this.$store.state.time.globalTimes.endTime
    this.subdigitsQuery.start_time = start_time
    this.subdigitsQuery.end_time = end_time
    this.subListQuery.start_time = start_time
    this.subListQuery.end_time = end_time

    this.serviceParams.start_time = start_time
    this.serviceParams.end_time = end_time

    if (JSON.stringify(this.appItem) != '{}') {
      this.subdigitsQuery.app_alias = this.appItem.alias
      this.subListQuery.app_alias = this.appItem.alias
      this.serviceParams.app_alias = this.appItem.alias
    }

    this.getUrlMappingSubdigits() // 获取上面统计数
    this.getUrlMappingSublist() // 获取table数据
    this.getServiceList() // 获取服务列表select
    this.columnChange()
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.disposeEcharts(this.myChartList)
    this.disposeEcharts(this.myChartboxList)
    this.disposeEcharts(this.myChartBox2List)
  },
  methods: {
    async handelUpload(file, fileList) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (isLt5M) {
        const param = new FormData()
        param.append('file', file.raw)
        param.append('app_alias', this.appItem.alias)
        const res = await uploadExcel(param)
        if (res.code == 200) {
          this.$message.success('上传成功!')
        }
        await this.getUrlMappingSublist() // 获取table数据
      } else {
        this.$message.error('上传文件不能超过5M!')
        return false
      }
    },
    // 获取该业务的服务list
    getServiceList() {
      fatchServiceList(this.serviceParams).then(res => {
        if (res.code == 200) {
          this.serviceList = res.data.service_list
        } else {
          this.serviceList = []
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        url: undefined,
        type: undefined,
        module: undefined,
        summary: undefined,
        favor: undefined
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      if (row.id != 0) {
        getUrlMapping(id).then(response => {
          this.form = response.data
          this.form.id = row.id
          this.title = '修改URL前缀'
          this.isEdit = true
          this.open = true
        })
      } else {
        this.form = row
        // this.form.id = undefined
        this.isEdit = true
        this.open = true
      }
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id !== undefined || this.form.id != 0) {
            updateUrlMapping(this.form, this.form.id).then(response => {
              if (response.code === 200) {
                this.msgSuccess(response.msg)
                this.open = false
                this.subListQuery.pageIndex = 1
                this.subList = []
                this.getUrlMappingSublist() // 获取table数据
              } else {
                this.msgError(response.msg)
              }
            })
          } else {
            addUrlMapping(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess(response.msg)
                this.open = false
                this.queryParams.pageIndex = 1
                this.serveceMapList = []
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    },
    handleFavor(row) {
      if (row.favor == 1) {
        row.favor = '0'
      } else if (row.favor == 0) {
        row.favor = '1'
      }

      favor({ favor: row.favor }, row.id).then(res => {
        if (res.code = 200) {
          this.msgSuccess(res.msg)
          this.subListQuery.pageIndex = 1
          this.subList = []
          this.getUrlMappingSublist()
        }
      })
    },
    // 控制列的显示和隐藏
    columnChange(val) {
      this.colData.filter((i) => {
        if (this.colSelect.indexOf(i.title) !== -1) {
          i.istrue = true
        } else {
          i.istrue = false
        }
      })
    },
    Refresh(timeOut) {
      this.timer = setInterval(() => {
        this.getUrlMappingSubdigits() // 获取上面统计数
        this.getUrlMappingSublist() // 获取table 数据
        this.getServiceList() // 获取服务列表select
      }, timeOut)
    },
    getUrlMappingSubdigits() { // 获取上面统计数量
      urlMappingSubdigits(this.subdigitsQuery).then(res => {
        if (res.code == 200) {
          this.digitsObj = res.data
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.subListQuery.pageIndex = 1
      this.subList = []
      this.getUrlMappingSublist()
    },
    getUrlMappingSublist() { // 获取table数据
      this.myChartList = []
      this.myChartboxList = []
      this.myChartBox2List = []
      this.loading = true
      urlMappingSublist(this.subListQuery).then(res => {
        if (res.code == 200) {
          this.loading = false
          this.subList = res.data.list
          this.total = res.data.count
        }
      })
    },
    go(path) {
      this.$router.push(path)
    },
    handleRowClick(row, column, event) {
      // 原先跳转在接口详情页面
      storage.set('row', row)
      this.$router.push({
        path: '/service/InterfaceDetail/index',
        query: {
          kind: row.route,
          name: row.name,
          method: row.method,
          service_name: row.service_name
        }
      })
    },
    drawEchartsp5(row, index) {
      const that = this
      if (row.duration_stats != undefined) {
        const option = {
          tooltip: {
            trigger: 'axis',
            confine: false,
            appendToBody: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: row.duration_stats.time,
            show: false
          },
          grid: {
            top: '15%',
            bottom: '10%',
            left: '1%',
            right: '1%'
          },
          yAxis: {
            type: 'value',
            show: false
          },
          series: [
            {
              name: 'P50',
              data: row.duration_stats.p50,
              type: 'line',
              showSymbol: false,
              lineStyle: {
                width: 1
              },
              areaStyle: {
                z: 3,
                coordinateSystem: 'cartesian2d',
                legendHoverLink: true,
                clip: true,
                color: 'rgba(0, 0, 180, 0.2)'
              },
              tooltip: {
                valueFormatter: function(value) {
                  return value + ' ms'
                }
              }
            }
          ]
        }

        setTimeout(() => {
          const chartId = 'tiger-' + arguments[2] + '-trend-index' + arguments[1]

          let myChart = that.$echarts5.getInstanceByDom(document.getElementById(chartId))
          if (myChart == null) {
            myChart = that.$echarts5.init(document.getElementById(chartId), 'macarons')
          }

          myChart.dispatchAction({ type: 'hideTip' })
          this.myChartList.push(myChart)
          myChart.setOption(option)
          // myChart.group = `index${row.id}`
          // this.$echarts5.connect(`index${row.id}`)
        }, 1000)
      }
    },
    drawEchartsp90(row, index) {
      const that = this
      if (row.duration_stats != undefined) {
        const option = {
          tooltip: {
            trigger: 'axis',
            confine: false,
            appendToBody: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: row.duration_stats.time,
            show: false
          },
          grid: {
            top: '15%',
            bottom: '10%',
            left: '1%',
            right: '1%'
          },
          yAxis: {
            type: 'value',
            show: false
          },
          series: [
            {
              name: 'P90',
              data: row.duration_stats.p90,
              type: 'line',
              showSymbol: false,
              lineStyle: {
                width: 1
              },
              areaStyle: {
                z: 3,
                coordinateSystem: 'cartesian2d',
                legendHoverLink: true,
                clip: true,
                color: 'rgba(0, 0, 180, 0.3)'
              },
              tooltip: {
                valueFormatter: function(value) {
                  return value + ' ms'
                }
              }
            }
          ]
        }

        setTimeout(() => {
          const chartId = 'tiger-' + arguments[2] + '-trend-index' + arguments[1]

          let myChartbox = that.$echarts5.getInstanceByDom(document.getElementById(chartId))
          if (myChartbox == null) {
            myChartbox = that.$echarts5.init(document.getElementById(chartId), 'ninebox')
          }

          this.myChartboxList.push(myChartbox)
          myChartbox.dispatchAction({ type: 'hideTip' })
          myChartbox.setOption(option)
          // myChartbox.group = `index${row.id}`
          // this.$echarts5.connect(`index${row.id}`)
        }, 1000)
      }
    },
    drawEchartsp99(row, index) {
      const that = this
      if (row.duration_stats != undefined) {
        const option = {
          tooltip: {
            trigger: 'axis',
            confine: false,
            appendToBody: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: row.duration_stats.time,
            show: false
          },
          grid: {
            top: '15%',
            bottom: '10%',
            left: '1%',
            right: '1%'
          },
          yAxis: {
            type: 'value',
            show: false
          },
          animation: true,
          animationDuration: 1000,
          series: [
            {
              name: 'P99',
              data: row.duration_stats.p99,
              type: 'line',
              showSymbol: false,
              lineStyle: {
                width: 1
              },
              areaStyle: {
                z: 3,
                coordinateSystem: 'cartesian2d',
                legendHoverLink: true,
                clip: true,
                color: 'rgba(0, 0, 180, 0.3)'
              },
              tooltip: {
                valueFormatter: function(value) {
                  return value + ' ms'
                }
              }
            }
          ]
        }

        setTimeout(() => {
          const chartId = 'tiger-' + arguments[2] + '-trend-index' + arguments[1]
          let myChartBox2 = that.$echarts5.getInstanceByDom(document.getElementById(chartId))
          if (myChartBox2 == null) {
            myChartBox2 = that.$echarts5.init(document.getElementById(chartId), 'hundredbox')
          }
          this.myChartBox2List.push(myChartBox2)
          myChartBox2.dispatchAction({ type: 'hideTip' })
          myChartBox2.setOption(option)
          // myChartBox2.group = `index${row.id}`
          // this.$echarts5.connect(`index${row.id}`)
          // myChartBox2.resize();
          // myChartBox2.group = 'group1'
          // this.$echarts5.connect('group1')
          // myChartBox2.group = `index${index}`
          // this.$echarts5.connect(`index${index}`)
        }, 1000)
      }
    },
    back() {
      this.$router.go(-1)
    },
    disposeEcharts(echartsList) {
      if (echartsList.length > 0) {
        for (let i = 0; i < echartsList.length; i++) {
          echartsList[i].dispose()
        }
      }
    },
    handChange(val) {
      this.subListQuery.service_name = val
      this.subListQuery.pageIndex = 1
      this.getUrlMappingSublist()
    }
  }
}
</script>
<style lang="scss" scoped>
// @font-face {
//   font-family: 'iconfont';  /* Project id 4241886 */
//   src: url('https://at.alicdn.com/t/c/font_4241886_44emlzl9ad4.woff2?t=1694073615647') format('woff2'),
//        url('https://at.alicdn.com/t/c/font_4241886_44emlzl9ad4.woff?t=1694073615647') format('woff'),
//        url('https://at.alicdn.com/t/c/font_4241886_44emlzl9ad4.ttf?t=1694073615647') format('truetype');
// }
.iconfont {
  font-family: "iconfont" !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-jiantou_zuoyouqiehuan:before {
  content: "\eb0d";
}

.icon-qiehuan:before {
  content: "\e606";
}

.icon-qiehuan1:before {
  content: "\e789";
}
::v-deep .el-card__body{
  position: relative !important;
}
.back{
  position: absolute;
  top:10px;
  right:10px;
  width:20px;
  height:20px;
}
.tiger-trend-charts {
  height: 40px;
  //  width:100px;
   min-width: 80px;
   max-width: 140px;
  }
  ::v-deep .el-icon-star-on{
    font-size: 16px;
  }
  .more{
    margin:16px 0;
    text-align: center;
    font-size: 16px;
    color:#1890ff;
    cursor: pointer;
  }
  .nomore{
    color:#999;
  }
  .green_small{
    display: inline-block;
    width:8px;
    height: 8px;
    border-radius: 50%;
    background:#67C23A;
    margin-right:8px;
  }
  .red_small{
    width:8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background:#F56C6C;
    margin-right:8px;
  }
.table_bg{
  background: #e8f4ff;
  color:#1890ff;
  padding:0 4px;
}
.table_bg_red{
  background-color: #fef0f0;
  color: #f56c6c;
  padding:0 8px;
}
.table_bg_yellow{
    background-color: #fdf6ec;
    color: #e6a23c;
    padding:0 4px;
}
.TableBox ::v-deep .el-table .cell{
  line-height: 40px !important;
  padding-left: 1px;
  padding-right: 1px;
  cursor: pointer;
}
.TableBox ::v-deep .el-table--medium .el-table__cell {
    padding: 2px 0!important;
}
.search-box{
  display: flex;
  // align-items: center;
}
.search-box-right{
  margin-top:5px;
  display: flex;
}
.P_box{
  // width:68px;
  min-width: 68px;
  max-width: 100px;
  // text-align: right;
  text-align:left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
  padding-right: 10px;
  box-sizing: border-box;
   margin-left: 10px;
}
.comp-start-upload ::v-deep .el-upload-dragger{
  width: auto;
  height: auto;
  border:none;
  border-radius: 0;
}
</style>
