<template>
  <BasicLayout>
    <template #wrapper>
      <!--  style="background-color:#f4f5f5;" -->
      <el-card class="box-card" style="flex:1;">
        <!-- <h4>应用页面</h4> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="概览分析" name="first">
              <div style="background-color: rgb(244, 245, 245);box-sizing:border-box;padding:8px 16px 4px">
                <el-row type="flex" justify="start" :gutter="8">
                    <el-col :span="12"
                    :lg="12"
                    :md="12"
                    :sm="24">
                        <div style='background-color: #fff;border: 1px solid #24292e1f;border-radius: 3px;position:relative;padding:6px'>
                          <Latency v-if="activeName=='first'" :percentile='percentile'/>
                          <div class="LatencySelect">
                            <el-radio-group size="mini" v-model="radio" @input="changePercentile" >
                              <el-radio :label="0.5">p.50</el-radio>
                              <el-radio :label="0.95">p.95</el-radio>
                              <el-radio :label="0.99">p.99</el-radio>
                            </el-radio-group>
                          </div>
                        </div>
                    </el-col>

                    <el-col :span="12"
                    :lg="12"
                    :md="12"
                    :sm="24">
                        <div style='background-color: #fff;border: 1px solid #24292e1f;border-radius: 3px;padding:6px'>
                          <!-- <TreeViews/> -->
                          <Service/>
                        </div>
                    </el-col>
                </el-row>
              </div>
              <!-- padding:4px 16px; -->
                <div style="background-color: rgb(244, 245, 245);box-sizing:border-box;padding:8px 16px 4px;">
                  <div style='background-color: #fff;border: 1px solid #24292e1f;border-radius: 3px;'>
                    <el-row type="flex" justify="start" :gutter="8" style="margin-bottom:8px;padding:6px">
                      <el-col :span='24' :lg="24"
                      :md="24"
                      :sm="24">
                      <!-- <Service/> -->
                      <TreeViews/>
                      </el-col>
                    </el-row>
                  </div>
                </div>

             <div>
              <!-- <div style="background-color: rgb(244, 245, 245);box-sizing:border-box;padding: 12px 16px 4px;margin-top: -5px;">
                <el-row type="flex" justify="space-between" style="background:#fff;padding:3px 0;border: 1px solid #24292e1f;border-radius: 3px;">
                  <el-col :span="22" style="font-size:13px;">
                    <div class="viewbox">自定义视图</div>
                  </el-col>
                  <el-col :span="1.5">
                    <el-switch
                      v-model="isEdit"
                      @change='handleUpdate'
                      >
                    </el-switch>
                  </el-col>
                </el-row>
              </div> -->
                <iframe v-if="iframeUrl!=''" :src='iframeUrl' style="width:100%;height:calc( 100vh - 114px );min-height:500px;margin-top: -10px;over-flow:hidden"
                  id="myIframe"
                  scrolling='auto'
                  frameBorder='no'
                  border='0'
                  marginWidth='0'
                  marginHeight='0' height="calc( 100vh - 114px )"></iframe>
             </div>
             <el-row v-if='dashFlag==true' style="padding:0 16px;background: rgb(244,245,245);">
                <el-col
                :span="24"
                :lg="24"
                :md="24"
                :sm="24"
                style="margin-top: 8px;margin-bottom:35px;"
              >
                  <el-tooltip content="为本应用添加自定义面板" placement="bottom" effect="light">
                    <div
                      class="addCard"
                      :body-style="{ padding: '0px' }"
                      @click="handleAdd"
                    >
                      <div class="flex-add">
                        <i class="el-icon-plus" size='24'></i>
                      </div>
                    </div>
                  </el-tooltip>
                </el-col>

             </el-row>
          </el-tab-pane>
          <el-tab-pane label="拓扑分析" name="second">
              <div style="position:relative;padding:10px;background:#fff;">
                <!-- <a class="title_href" :href="`${topoUrl}`" target='_blank'>
                  <i class="el-icon-full-screen"></i>
                </a> -->
                <span class="title_href" id='fullscreen_button'>
                  <svg-icon :icon-class="isFull?'exit-fullscreen':'fullscreen'" @click.native.prevent="clickFull" />
                </span>
                <div style="height:calc(100vh - 110px);"  v-loading="loading">
                  <iframe
                  v-if="activeName=='second'"
                  :src="topoUrl"
                  style="width:100%;height:calc(100vh - 110px);min-height:600px"
                  id="topoFrame"
                  ref="topoFrame"
                  scrolling='auto'
                  frameBorder='no'
                  border='0'
                  marginWidth='0'
                  marginHeight='0'
                  ></iframe>
                </div>
              </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="链路分析" name="third">链路分析</el-tab-pane> -->
          <!-- <el-tab-pane label="日志关联分析" name="third">
            <Log/>
          </el-tab-pane> -->
          <!-- <el-tab-pane label="监控" name="five">监控</el-tab-pane> -->
          <el-tab-pane label="接口映射" name="fourth">
            <ServiceMap/>
          </el-tab-pane>
          <el-tab-pane label="业务配置" name="five">
            <Settings/>
          </el-tab-pane>
        </el-tabs>
        <!-- <div class="app_name">
          <el-button size="mini" type="danger" @click="getFireEvent">{{event_number}}个事件</el-button>
          <span style="margin-left:10px">{{Item.name}}</span>
        </div> -->

        <el-drawer
            :visible.sync="drawerfire"
            direction="rtl"
            size="55%"
            @close="drawerFireClose"
          >
          <div style="margin-bottom:16px">
            <el-table
              v-loading="fireLoading"
              :data="fireEventList"
            >
              <el-table-column label="事件" header-align="center" align="left" prop="exceptionName" :show-overflow-tooltip="true"/>
              <el-table-column label="异常状态" header-align="center" align="center" prop="alertStatus" width="100">
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.alertStatus === 4 ? 'danger' : 'warning'"
                    disable-transitions
                  >{{ scope.row.alertStatus==4?"已告警":"触发异常"}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="发生时间" header-align="center" align="center" prop="appendTime" width="160">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.appendTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="事件信息" header-align="center" align="left">
                <template slot-scope="scope">
                  <span @click="handleOpen(scope.row)" style="cursor: pointer;">
                    <span v-if="scope.row.rowResult =='UNSET'">
                      <el-tooltip placement="bottom">
                          <div
                            slot="content"
                            style="width:400px;max-height:200px; overflow-y: scroll;"
                          >
                          {{scope.row.rowsResult}}
                          </div>
                          <span class="missionBodystyle" style="display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{{
                            scope.row.rowsResult
                          }}</span>
                        </el-tooltip>
                      </span>
                      <span v-else>{{scope.row.rowResult}}</span>
                  </span>


                  <!-- <span @click="handleOpen(scope.row)" style="cursor: pointer;">
                    <span v-if="scope.row.rowResult =='UNSET'">
                      <el-popover
                          placement="top-start"
                          title=""
                          width="50%"
                          trigger="hover"
                          popper-class="workorder-remark"
                      >
                          <div>{{ scope.row.rowsResult }}</div>
                          <span slot="reference">
                            <span style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{{ scope.row.rowsResult}}</span>
                          </span>
                      </el-popover>
                    </span>
                    <span v-else>{{scope.row.rowResult}}</span>
                  </span> -->
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleIsIgnore(scope.row)"
                  >忽略
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleIsResolve(scope.row)"
                  >已解决
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="totalFire>0"
              :total="totalFire"
              :page.sync="queryFire.pageIndex"
              :limit.sync="queryFire.pageSize"
              @pagination="getFireEvent"
            />
          </div>
        </el-drawer>


        <el-dialog :title="titlefire" :visible.sync="openfire" :center='true' width="700px" :close-on-click-modal="false">
          <!-- <json-viewer :value="value" copyable theme="my-awesome-json-theme"></json-viewer> -->
          <div class="exercise">
            <codemirror
              v-model="codeSnippets"
              :options="cmOptions"
            />
          </div>
          <div slot="footer" class="dialog-footer">
            <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
            <el-button @click="cancelevent">关 闭</el-button>
          </div>
        </el-dialog>


        <!-- <el-drawer title='节点详情' :visible.sync="opennode" size="30%" :before-close="closeNode">
          <div>拓扑节点点击打开</div>
        </el-drawer> -->

        <div class="topoWrap">
          <el-dialog
          :visible.sync="VisibleTopo"
          :fullscreen='true'
          center>
                <div style="height:calc(100vh - 10px);"  v-loading="loading">
                    <iframe
                      :src="topoUrl"
                      style="width:100%;height:calc(100vh - 10px);min-height:700px"
                      ref="topoFrame"
                      scrolling='auto'
                      frameBorder='no'
                      border='0'
                      marginWidth='0'
                      marginHeight='0'
                      ></iframe>
                  </div>
          <!-- <div v-else class="noData">
              <div class="noData_title">拓扑分析</div>
              <div style="text-align: center;color: rgba(36, 41, 46, 0.75);font-size: 18px; width: 100%;line-height:4rem">No Data</div>
          </div> -->
          </el-dialog>
        </div>
        <div class="grafanaEdit">
          <div class="small">
            <i class="el-icon-refresh" style="font-size:20px;vertical-align: middle;" title="可编辑"></i>
          </div>
          <div class="big">
            <el-switch
              v-model="isEdit"
              @change='handleUpdate'
              style="margin-top:1px;margin-right:4px;"
              >
            </el-switch><span style="vertical-align: middle;">可编辑</span>
          </div>
        </div>
      </el-card>
    </template>
  </BasicLayout>
</template>
<script>
// 编辑器代码格式
import 'codemirror/mode/properties/properties.js'
// 自动刷新(防止codemirror需要手动刷新才出数据)
// import 'codemirror/addon/display/autorefresh'
// 主题
import 'codemirror/theme/ayu-mirage.css'
import "codemirror/theme/panda-syntax.css";
require("codemirror/mode/sql/sql");
// require("codemirror/mode/json/json");


require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");
import Latency from "./components/Latency.vue"
import Service from "./components/Service.vue"
import TreeViews from "./components/TreeViews.vue"
import ServiceMap from "./components/ServiceMap.vue"
import Settings from "./components/Settings.vue"
import Log from "./components/Log.vue"
import { serviceGraphSide} from '@/api/topo'
import {otAppDashboard,addDashBoard} from "@/api/dashboard"
import { listOtPlugins, singleOtPlugin,addOtPlugins,updateOtPlugins,delOtPlugins } from "@/api/plugin";
// import {singleNums} from '@/api/event'
import {eventNums,fireEvent,notate} from '@/api/event'

import storage from '@/utils/storage'
// import qs from 'qs'

// import {analyst} from '@/api/apps'
import { mapGetters } from 'vuex'
export default {
  components:{
    Latency,
    Service,
    TreeViews,
    ServiceMap,
    Settings,
    Log
  },
  computed: {
    ...mapGetters([
      'globalTime',
      'startTime',
      'endTime'
    ])
  },

  data(){
    return{
      isFull: false,
      VisibleTopo:false,
      opennode:false,
      minHeight:0,
      openfire:false,
      titlefire:'',
      codeSnippets: '',
      cmOptions: {
        autorefresh: true,
        tabSize: 4,
        // mode: 'text/x-sql',
        mode:'application/json',
        theme: 'panda-syntax',
        line: true,
        lineWrapping:true,
        viewportMargin: Infinity, //处理高度自适应时搭配使用
        highlightDifferences: true,
        autofocus: false,
        indentUnit: 4, // 智能缩进单位为4个空格长度
        smartIndent: true,
        readOnly: true, // 只读
        showCursorWhenSelecting: true,
        firstLineNumber: 1,

        flattenSpans: false, // 默认情况下，CodeMirror会将使用相同class的两个span合并成一个。通过设置此项为false禁用此功能
        matchBrackets: true, // 匹配符号
        lineWiseCopyCut: true, // 如果在复制或剪切时没有选择文本，那么就会自动操作光标所在的整行
        lineNumbers: true, // 显示行号
        autoCloseBrackets: true, // 自动输入括弧
        foldGutter: true, // 允许在行号位置折叠
        styleActiveLine: true, // 激活当前行样式
      },
      totalFire:0,
      drawerfire:false,
      fireLoading:false,
      queryFire:{
        pageIndex:1,
        pageSize:10,
        exceptionName:'',
        appId:0,
        isKnow: 0,
        isResolve: 0,
        isIgnore: 0
      },
      fireEventList:[],
      event_number:0,
      appName:'',
      loading: false,
      isEdit:false,
      radio:0.95,
      activeName:'first',
      // topoUrl:'http://observe-front.cestong.com.cn/ui/index.html',
      topoUrl:'/ui/index.html',
      // topoUrl:'http://39.106.74.84:4040/',
      serviceQuery:{
          "start_time":1694534400,
          "end_time":1694620800,
          "app_alias":"UNSET",
          "service_name":"checkoutservice",
          "percentile":0.50
      },
      serviceList:[],
      LatencyData:undefined,
      analystQuery:{
        start_time:1694534400,
        end_time:1694620800,
        percentile:0.95,
      },
      app_alias:'',
      appsItem:{},
      percentile:0.95,
      appId:'',
      //插件url拼接dashboarduid的最终iframe的url地址
      iframeUrl:"",
      //插件的url，用于拼接dashboardid
      pluginUrl:'',
      //dashboard uid 用于拼接插件的url
      dashboardUid:'',
      // 是否携带请求头（例如：token）
      isRequestHeader: true,
      config:{},
      pluginList:[],//插件列表
      dashFlag:false,
      sendObj:{
        start_time:0,
        end_time:0,
        percentile:0.95,
        app_alias:'',
      },
      Item:{},
      queryParams:{
        pageIndex:1,
        pageSize:10
      },
      queryNums:{
        start_time:0,
        end_time:0,
        pageSize:10,
        pageIndex:1,
        app_ids:0,
      },
      timer:null
    }
  },
  watch:{
     '$store.state.time.globalTimes': {
        handler(newValue, oldValue) {
            var live = false
            if(newValue){
              this.topoUrl = ''
              this.changeQuery('/apps/index',newValue.startTime,newValue.endTime,live);
              this.topoUrl='/ui/index.html'

            }
            if(newValue.timeOut){
                if(newValue.timeOut == 1){
                    live = false
                }else{
                    live = true;
                }

                this.topoUrl = ''
                this.changeQuery('/apps/index',newValue.startTime,newValue.endTime,live);
                this.topoUrl='/ui/index.html'
            }
            if(newValue.timeOut==undefined){
              live = false
              this.topoUrl = ''
              this.changeQuery('/apps/index',newValue.startTime,newValue.endTime,live);
              this.topoUrl='/ui/index.html'
            }

        },
        deep: true
    },

  },
  mounted(){
      let name = sessionStorage.getItem('currentTab')
     // 判断是否存在currentTab，即tab页之前是否被点击切换到别的页面
     if(name){
       this.activeName = name
      }
  },
  created(){
    this.Item=storage.get('appsItem');
    if(this.$route.query.item.app_alias != undefined){
      this.sendObj.app_alias = this.$route.query.item.app_alias;
      this.appName = this.$route.query.item.name
    }
    this.getList();
    if( this.activeName=='first'||this.activeName=='second' || this.activeName=='fourth'){
      this.$store.commit('time/setTimeFlag',true)
    }else{
      this.$store.commit('time/setTimeFlag',false)
    }
    if(this.$route.query.id != undefined){
      this.appId = this.$route.query.id;
      this.queryNums.app_ids = this.$route.query.id;
      this.queryFire.appId = this.$route.query.id;
    }
    this.geteventNums();
  },
  methods:{
    clickFull() {
        this.VisibleTopo=true;
    },
    changeQuery(router,start_time,end_time,live){
      this.$router.push({
        path:router,
        query:{
          id:this.$route.query.id,
          app_alias:this.$route.query.app_alias,
          start_time:start_time,
          end_time:end_time,
          item:this.$route.query.item,
          live:live
        }
      })
      let topoIframe = document.getElementById('topoFrame')
      this.populateIframeTopo(topoIframe)
    },
    //忽略
    handleIsIgnore(row){
      let obj = {
        isKnow:0,
        isResolve:row.isResolve,
        isIgnore:row.isIgnore==0?row.isIgnore=1:row.isIgnore=0
      }
      notate(obj,row.id).then((res)=>{
        if(res.code == 200){
          this.msgSuccess(res.msg)
          this.queryFire.pageIndex = 1;
           this.getFireEvent();
        }
      })
    },
    //已解决
    handleIsResolve(row){
      let obj = {
        isKnow:0,
        isResolve:row.isResolve==0?row.isResolve=1:row.isResolve=0,
        isIgnore:row.isIgnore
      }
      notate(obj,row.id).then((res)=>{
        if(res.code == 200){
          this.msgSuccess(res.msg)
           this.queryFire.pageIndex = 1;
          this.getFireEvent();
        }
      })
    },
    cancelevent(){
      this.openfire = false
    },
     /** 事件信息 */
    handleOpen(row){
      // this.reset()
      this.openfire = true
      this.titlefire = '事件信息'
      if(row.rowResult =='UNSET'){
        this.codeSnippets=JSON.stringify(JSON.parse(row.rowsResult),null,'\t')
      }else{
        this.codeSnippets=row.rowResult;
      }
    },
    drawerFireClose(){
      this.drawerfire=false;
    },
    getFireEvent(){
      this.fireLoading=true
      this.drawerfire=true;
      fireEvent(this.queryFire).then((res)=>{
        if(res.code == 200){
          this.fireLoading = false;
          this.fireEventList=res.data.list;
          this.totalFire = res.data.count;
        }
      })
    },
    geteventNums(){
      eventNums(this.queryNums).then((res)=>{

         if(res.code == 200){
          if(res.data.list.length>0){
            this.event_number = res.data.list[0].exception_num;
          }
         }
      })
    },
    iframeLoad(){
      // this.loading = true;
      const iframe = this.$refs.topoFrame;
      const that = this;
      if (iframe.attachEvent) { // IE
        iframe.attachEvent('onload', () => {
          that.loading = false;
          iframe.contentWindow.postMessage({data:this.sendObj},'*');
        });
      } else { // 非IE
        iframe.onload =  () => {
          that.loading = false;
          iframe.contentWindow.postMessage({data:this.sendObj},'*');
        };
      }
    },
    doAction () {
        const iframe = this.$refs.topoFrame;
        iframe.contentWindow.postMessage(this.sendObj,'*');
    },
    handleClick(tab,event){

      if(tab.name=='first' || tab.name =='second' || tab.name=='fourth'){
        this.$store.commit('time/setTimeFlag',true)
      }else{
        this.$store.commit('time/setTimeFlag',false)
      }

      if(tab.name =='second'){
        // this.iframeLoad();
        this.doAction();
      }
      sessionStorage.setItem('currentTab', tab.name)
      // this.$store.commit('time/setTimes',this.timeObj)
    },
    changePercentile(val){
      this.percentile = Number(val);
    },
    getOtAppDashboard(){
       otAppDashboard(this.appId).then(
        res => {
          if(res.code == 200){
            this.dashboardUid = res.data.dashboardUid
            if(res.data.dashboardUid){
              if(this.isEdit==true){
                this.iframeUrl = this.pluginUrl+this.dashboardUid
              }else{
                this.iframeUrl = this.pluginUrl+this.dashboardUid+'?kiosk';
              }
            }else{
              this.iframeUr=''
            }

            if (this.isRequestHeader) {
              setTimeout(() => {
                const myIframe = document.querySelector('#myIframe')
                this.populateIframe(myIframe, [['Authorization', 'Bearer '+this.config.viewer]])
              }, 0)
            }

            if(res.data.dashboardUid){
              this.dashFlag=false;
            }else{
              this.dashFlag=true;
            }
          }
        }
      )
    },
    getList() {
      // listPlug(this.queryParams).then((response) => {});
      listOtPlugins().then((res) => {
        if (res.code == 200) {
          this.pluginList = res.data.list;
          this.pluginUrl = res.data.list[0].url;
          this.config = JSON.parse(res.data.list[0].config);
          if(res.data.list.length>0 || res.data.list != null){
            this.getOtAppDashboard();
          }
        }
      });
    },
    handleUpdate(val){
      this.isEdit=val;
      this.getList();
    },
    populateIframeTopo (iframe) {
      let xhrTopo = new XMLHttpRequest()
      xhrTopo.open('GET', this.topoUrl)
      xhrTopo.responseType = 'blob'
      xhrTopo.onreadystatechange = () => {
        if (xhrTopo.readyState === xhrTopo.DONE) {
          if (xhrTopo.status === 200) {
            // iframe.src = URL.createObjectURL(xhr.response)
            iframe.src= this.topoUrl;

          }
        }
      }
      xhrTopo.send()
    },
     /**
     * iframe 添加请求头
     */
    populateIframe (iframe, headers) {
      let xhr = new XMLHttpRequest()
      xhr.open('GET', this.iframeUrl)
      xhr.responseType = 'blob'
      headers.forEach((header) => {
        // xhr.setRequestHeader('Authorization', "Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk");
        xhr.setRequestHeader(header[0], header[1]);
      })
      xhr.onreadystatechange = () => {
        if (xhr.readyState === xhr.DONE) {
          if (xhr.status === 200) {
            // iframe.src = URL.createObjectURL(xhr.response)
            iframe.src= this.iframeUrl;

          }
        }
      }
      xhr.send()
    },
    handleAdd(){
      this.isEdit=false;
       if(this.pluginList.length==0||this.pluginList ==null){
          this.$message({
            message: '请到插件中心创建插件',
            type: 'warning'
          });
       }else {
          addDashBoard(this.appId).then((res)=>{
            this.msgSuccess(res.msg);
            window.location.reload();
          })
       }
    },
  }
}
</script>
<style scoped lang='scss'>
.title_href{
  width:32px;
  height:32px;
  position: absolute;
  top:5px;
  right:0px;
  display: block;
  i{
    font-size: 16px;
    color:#999;
  }
}
.LatencySelect{
  position: absolute;
  right:20px;
  top:20px;

}
::v-deep .el-card__body{
  position: relative !important;
}
.LatencySelect ::v-deep .el-radio{
    margin-right: 20px;
  }
.LatencySelect ::v-deep .el-radio__label {
    padding-left: 6px;
}
.LatencySelect ::v-deep .el-radio__inner{
  width: 12px;
  height: 12px;
}
.addCard {
  border: 2px dotted #e9e9e9;
  border-radius: 2px;
  height: 110px;
}
.addCard:hover {
  border-color: #409eff;
  color: #409eff;
  .flex-add {
    color: #409eff;
  }
}
.flex-add {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 24px;
  cursor: pointer;
  background:#fff;
}
.viewbox{
  color:#999;
  padding-left:6px;
  margin-top:2px;
  // align-items: center;
}
::v-deep .el-tabs__header{
  position: fixed;
  top:50.5px;
  // z-index: 99;
  z-index: 2;
  background: #fff;
  width: 91.3%;
  padding-top:16px;
  margin-left: -30px;
}
::v-deep .el-tabs__nav-wrap {
    padding-left: 30px;
}
::v-deep .el-tabs__content {
    overflow: hidden;
    position: relative;
    margin-top: 56px;
}
.box-card ::v-deep .el-card__body{
  padding:0!important;
}
.app_name{
    // width: 100px;
    position: fixed;;
    top: 67px;
    right: 28px;
    // z-index: 101;
    z-index:3;
    height: 40px;
    line-height: 40px;
    text-align: right;
    min-width: 120px;
    font-size: 16px;
    font-weight: bold;
}
.event{
  padding: 2px 4px;
  margin-right: 12px;
  color: rgb(255, 255, 255);
  // background-color: rgb(245, 108, 108);
  background-color:red;
  padding: -6px 4px;
  // font-weight: normal;
  // font-size: 13px;
}
::v-deep .el-button--mini{
  font-size: 14px;
  font-weight: bold;
}
.workorder-remark {
    background-color: #000;
    color: #ffffff;
    border-color: #000;
    max-width: 50%;
    font-size: 12px;
}
.topoWrap ::v-deep .el-dialog__header{
  padding:0;
  padding-bottom: 0;
}
.topoWrap ::v-deep .el-dialog--center .el-dialog__body{
  padding:0;
}
.topoWrap ::v-deep .el-dialog__body{
  padding:0;
}
.grafanaEdit{
  position: fixed;
  background-color: #fff;
  border-radius: 15px;
  padding: 4px 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  right:10px;
  bottom:50px;
  height: 30px;
  // line-height: 30px;
  text-align: center;
  z-index: 99;
  font-size: 12px;
  color: #303133;
  font-weight: 500;
  .small{
    display: block;
  }
  .big{
    // display: none;
    width:0;
    opacity: 0;
  }
  // background:#1890ff;
}
.grafanaEdit:hover{
  .small{
    display: none;
  }
  .big{
    // display: block;
    opacity: 1;
    width:auto;
    transform: all 0.3;
  }
}
</style>
<style>
.el-tooltip__popper{ max-width:50% }
.el-tooltip__popper {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 15;
      -webkit-box-orient: vertical;
}
.workorder-remark {
    background-color: #000;
    color: #ffffff;
    border-color: #000;
    max-width: 50%;
    font-size: 12px;
     /* 想要显示全部，下面就不用写了 */
    /* padding-bottom: 4px !important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical; */
}

</style>
