<template>
  <div>
    <BasicLayout style="padding:24px">
      <template #wrapper>
        <div style="margin-top:10px;padding:14px;">
        <!-- <el-card class="box-card" style="margin-top:10px"> -->
         <el-row type="flex" justify="start" :gutter="35" v-if="appsList.length>0">
           <!-- v-if="appData !=null" -->
          <!-- <template v-if="appData !=null"> -->
            <el-col :span="8"
              :lg="8"
              :md="12"
              :sm="24"
              style="margin-bottom:0.4375rem" v-for="item in appsList" :key="item.id">
                <div class='Apply_box' @click="go('/business-analysis/analysis/index',item)">
                  <div class="Apply_title">
                    <!-- <div :style="item.apdex>=0.94?'color:#66DC4A'
                      :(item.apdex>=0.85&&item.apdex<0.94)?'color:#60B4F9'
                      :(item.apdex>=0.7&&item.apdex<0.85)?'color:#8B8B8B'
                      :(item.apdex>=0.5&&item.apdex<0.7)?'color:#F1A657'
                      :'color:#EA463D'">
                      <span class="circle" :class="item.apdex>=0.94?'gc'
                      :(item.apdex>=0.85&&item.apdex<0.94)?'bc'
                      :(item.apdex>=0.7&&item.apdex<0.85)?'grc'
                      :(item.apdex>=0.5&&item.apdex<0.7)?'oc'
                      :'rc'"></span>{{item.name}}
                    </div> -->
                    <div>
                      <span class="circle" :class="item.apdex>=0.94?'gc'
                      :(item.apdex>=0.85&&item.apdex<0.94)?'bc'
                      :(item.apdex>=0.7&&item.apdex<0.85)?'grc'
                      :(item.apdex>=0.5&&item.apdex<0.7)?'oc'
                      :'rc'"></span>{{item.name}}
                    </div>
                    <div>
                      <!-- is-dot -->
                      <!-- <span>{{item.exception_num}}</span> -->
                        <el-badge ref='badgebox' :value="item.exception_num" class='badge'>
                          <img class="title_img" :src='bellpin'/>
                        </el-badge>
                         <!-- <el-badge style="visibility: hidden;" value="12" class='badge'>
                          <img class="title_img" :src='bellpin'/>
                        </el-badge> -->
                      <!--<img class="title_img" :src='pushpin'/> -->
                      <img class="title_img" :src='more' style="width:0.05rem;margin-right:0;"/>
                    </div>
                  </div>
                  <div class="Apply_content">
                    <!-- <div class="Apply_l echartsbox" ref='gauge' :class="item.apdex>=0.94?'green'
                      :(item.apdex>=0.85&&item.apdex<0.94)?'blue'
                      :(item.apdex>=0.7&&item.apdex<0.85)?'gray'
                      :(item.apdex>=0.5&&item.apdex<0.7)?'orange'
                      :'red'">
                    </div> -->
                    <el-row type="flex" justify="space-between" :gutter="35">
                      <el-col :span="11" :lg="11" :md="11" :sm="11">
                        <div class="Apply_l echartsbox" ref='gauge'></div>
                      </el-col>
                      <el-col :span="13" :lg="13" :md="13" :sm="13" style="padding:0;">
                        <div class="Apply_r">
                          <el-row type="flex" justify="space-between" :gutter="12" style="margin-bottom:18px;margin-top: 8px;">
                            <el-col :span="12" :lg="12" :md="12" :sm="12">
                              <div class="Apply_r_list">
                                <p class='value'>
                                  {{(item.apdex==undefined?0:parseFloat(item.apdex).toFixed(2))}} <img class='arrow' :src='item.apdexFlag==true?g_up:red_down'/>
                                </p>
                                <p class='label'>
                                  Apdex
                                </p>
                              </div>
                            </el-col>
                            <el-col :span="12" :lg="12" :md="12" :sm="12">
                              <div class="Apply_r_list">
                                  <p class='value'>
                                    {{item.latency==undefined?0:parseFloat(item.latency).toFixed(2)}} <img class='arrow' :src='item.latencyFlag==true?red_up:g_down'/>
                                  </p>
                                  <p class='label'>
                                    响应时间(ms)
                                  </p>
                                </div>
                            </el-col>
                          </el-row>
                          <el-row type="flex" justify="space-between" :gutter="12">
                            <el-col :span="12" :lg="12" :md="12" :sm="12">
                              <div class="Apply_r_list">
                                  <p class='value'>
                                    {{item.rate==undefined?0:parseFloat(item.rate).toFixed(2)}} <img class='arrow' :src='item.rateFlag==true?g_up:red_down'/>
                                  </p>
                                  <p class='label'>
                                    吞吐率(rpm)
                                  </p>
                                </div>
                            </el-col>
                            <el-col :span="12" :lg="12" :md="12" :sm="12">
                              <div class="Apply_r_list">
                                <p class='value'>
                                  {{item.errorRate==undefined?0:parseFloat(item.errorRate).toFixed(2)}} <img class='arrow' :src='item.errorRateFlag==true?red_up:g_down'/>
                                </p>
                                <p class='label'>
                                  错误率(%)
                                </p>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                    </el-row>

                    <!-- <div class="Apply_r" >
                      <div class="Apply_r_list">
                        <p class='value'>
                          {{(item.apdex==undefined?0:parseFloat(item.apdex).toFixed(2))}} <img class='arrow' :src='item.apdexFlag==true?g_up:red_down'/>
                        </p>
                        <p class='label'>
                          Apdex
                        </p>
                      </div>
                      <div class="Apply_r_list">
                        <p class='value'>
                          {{item.latency==undefined?0:parseFloat(item.latency).toFixed(2)}} <img class='arrow' :src='item.latencyFlag==true?red_up:g_down'/>
                        </p>
                        <p class='label'>
                          响应时间(ms)
                        </p>
                      </div>
                      <div class="Apply_r_list">
                        <p class='value'>
                          {{item.rate==undefined?0:parseFloat(item.rate).toFixed(2)}} <img class='arrow' :src='item.rateFlag==true?g_up:red_down'/>
                        </p>
                        <p class='label'>
                          吞吐率(rpm)
                        </p>
                      </div>
                      <div class="Apply_r_list">
                        <p class='value'>
                          {{item.errorRate==undefined?0:parseFloat(item.errorRate).toFixed(2)}} <img class='arrow' :src='item.errorRateFlag==true?red_up:g_down'/>
                        </p>
                        <p class='label'>
                          错误率(%)
                        </p>
                      </div>
                    </div> -->
                  </div>


                </div>
            </el-col>
          <!-- </template> -->
          </el-row>

          <!-- <el-row type="flex" justify="start" :gutter="35" v-else>
            <el-col
              :span="8"
              :lg="8"
              :md="12"
              :sm="24"
              style="margin-bottom: 35px"
            >
              <div
                class="addCard"
                :body-style="{ padding: '0px' }"
                @click="handleAdd()"
              >
                <div class="flex-add">
                  <i class="el-icon-plus"></i> <span>新增应用</span>
                </div>
              </div>
            </el-col>
          </el-row> -->


          <!-- 添加或修改应用配置对话框 -->
        <el-dialog v-if="open" :title="title" :visible.sync="open" :close-on-click-modal="false">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="应用图片" prop="imgUrl">
              <img v-if="form.imgUrl" :src="form.imgUrl" class="el-upload el-upload--picture-card" style="float:left">
              <el-upload ref="sys_app_logo" accept=".png,.jpg,.jpeg" :headers="headers" :file-list="appsfileList" :action="appsAction" style="float:left" :before-upload="beforeUpload" list-type="picture-card" :show-file-list="false" :on-success="uploadSuccess">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
            <el-form-item label="应用名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入应用名称" :disabled="isEdit" />
            </el-form-item>
            <el-form-item label="应用别名" prop="alias">
              <el-input v-model="form.alias" placeholder="请输入应用别名" :disabled="isEdit" />
            </el-form-item>
            <el-row>
              <el-col :span='12'>
                <el-form-item label="负责人" prop="contractInfo">
                  <el-input v-model="form.contractInfo" placeholder="请输入负责人" :disabled="isEdit" />
                </el-form-item>
              </el-col>
               <el-col :span='12'>
                  <el-form-item label="手机号码" prop="contractPhone">
                  <el-input v-model="form.contractPhone" placeholder="请输入合作手机号" :disabled="isEdit" :maxlength="11"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="应用备注">
              <el-input v-model="form.desc" 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>

        <div class="back" @click="toggle()">
          <i class="iconfont icon-qiehuan1"></i>
        </div>


        <!-- </el-card> -->
        </div>
      </template>
    </BasicLayout>
  </div>
</template>

<script>
import { listApps, singleApps, addOtApps, updateOtApps, delOtApps, appsScore } from '@/api/apps'
import {eventNums} from '@/api/event'
// import echarts from 'echarts'
import resize from './mixins/resize'
import { getToken } from '@/utils/auth'
import storage from '@/utils/storage'
// const bgimg = require('@/assets/apply/custom-gauge-panel.png');
var bgimg = require("../../assets/apply/custom-gauge-panel.png")
let orangeColor = [
                    // {
                    //   offset: 0,
                    //   color: '#F3DF86' // 0% 处的颜色
                    // },
                    // {
                    //   offset: 0.5,
                    //   color: '#EFB153' // 100% 处的颜色
                    // },
                    // {
                    //   offset: 1,
                    //   color: '#EF8B35' // 100% 处的颜色
                    // },
                    // {
                    //   offset: 1,
                    //   color: '#5AFFA3' // 100% 处的颜色
                    // }
                     {
                      offset: 0,
                      color: '#EF8B35' // 0% 处的颜色
                    },
                    // {
                    //   offset: 0.5,
                    //   color: '#EFB153' // 100% 处的颜色
                    // },
                    {
                      offset: 1,
                      color: '#F3DF86' // 100% 处的颜色 F3DF86
                    },
                  ]
  let grayColor =[
    // {
    //   offset: 0,
    //   color: '#DBDBDB' // 0% 处的颜色
    // },
    // {
    //   offset: 0.5,
    //   color: '#B4B4B4' // 100% 处的颜色
    // },
    // {
    //   offset: 1,
    //   color: '#919191' // 100% 处的颜色
    // },
    {
      offset: 0,
      color: '#919191' // 0% 处的颜色
    },
    // {
    //   offset: 0.5,
    //   color: '#B4B4B4' // 100% 处的颜色
    // },
    {
      offset: 1,
      color: '#DBDBDB' // 100% 处的颜色 DBDBDB
    },
  ]
  let redColor =[
    // {
    //   offset: 0,
    //   color: '#E98152' // 0% 处的颜色
    // },
    // {
    //   offset: 0.5,
    //   color: '#FF4545' // 100% 处的颜色
    // },
    // {
    //   offset: 1,
    //   color: '#FF3030' // 100% 处的颜色 E98152
    // },
    {
      offset: 0,
      color: '#E95A44' // 0% 处的颜色
    },
    // {
    //   offset: 0.5,
    //   color: '#FF4545' // 100% 处的颜色
    // },
    {
      offset: 1,
      color: '#E98152' // 100% 处的颜色
    },
  ]



// var _panelImageURL = ROOT_PATH + '/data/asset/img/custom-gauge-panel.png';
// var _panelImageURL = bgimg;
var _animationDuration = 1000;
var _animationDurationUpdate = 1000;
var _animationEasingUpdate = 'quarticInOut';
// var _valOnRadianMax = 200;
// var _outerRadius = 200;
// var _innerRadius = 170;
// var _pointerInnerRadius = 40;
// var _insidePanelRadius = 140;
var _valOnRadianMax = 100;
var _outerRadius = 62;
var _innerRadius = 50;
var _pointerInnerRadius = 20;
var _insidePanelRadius = 40;

var _currentDataIndex = 0;

function makeText(valOnRadian) {
  // Validate additive animation calc.
  if (valOnRadian < -10) {
    alert('illegal during val: ' + valOnRadian);
  }
  return ((valOnRadian / _valOnRadianMax) * 100).toFixed(0) + '%';
}

export default {
  name: 'Home',
  mixins: [resize],
  data(){
    return{
      event_number:0,
      times:{
        // start_time:Math.round((new Date().getTime())/1000 - (5*60)),
        // end_time:Math.round(new Date().getTime()/1000),
        start_time:0,
        end_time:0,
        live:false
      },
      appsList:[],
      first_level_flag:true,
      apdex:99,
      appData:[{apdex:80},{apdex:99}],
      bellpin:require("../../assets/apply/bellpin.png"),
      green_down:require("../../assets/apply/green_down.png"),
      green_up:require("../../assets/apply/green_up.png"),
      g_down:require("../../assets/apply/g_down.jpg"),
      g_up:require("../../assets/apply/g_up.jpg"),
      red_down:require("../../assets/apply/red_down.png"),
      red_up:require("../../assets/apply/red_up.png"),
      orange_down:require("../../assets/apply/orange_down.png"),
      orange_up:require("../../assets/apply/orange_up.png"),
      more:require("../../assets/apply/more.png"),
      pushpin:require("../../assets/apply/pushpin.png"),
      green_circle:require("../../assets/apply/green_circle.png"),
      orange_circle:require("../../assets/apply/orange_circle.png"),
      blue_circle:require("../../assets/apply/blue_circle.png"),
      gray_circle:require("../../assets/apply/gray_circle.png"),
      red_circle:require("../../assets/apply/red_circle.png"),
      panelImageURL:require("../../assets/apply/custom-gauge-panel.png"),
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      isEdit: false,
      // 表单参数
      form: {
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '应用名称不能为空', trigger: 'blur' }
        ],
        alias: [
          { required: true, message: '应用别名不能为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '应用详情不能为空', trigger: 'blur' }
        ]
      },
      appsAction: process.env.VUE_APP_BASE_API + '/api/v1/public/uploadFile',
      appsfileList: [],
      headers: { 'Authorization': 'Bearer ' + getToken() },
      queryScore:{
        interval: 60,
        req_applist:[],
      },
      queryNums:{
        start_time:0,
        end_time:0,
        pageSize:10,
        pageIndex:1,
        app_ids:0,
      },
      appTimer:null
    }
  },
  created() {
    this.$store.commit('time/setTimeFlag',true)

    this.getList()

  },
  watch: {
    '$store.state.time.globalTimes': {
        handler(newValue, oldValue) {
            if(newValue){
              this.times.start_time = newValue.startTime;
              this.times.end_time = newValue.endTime;
              this.queryScore.interval = newValue.interval;
              this.getList();
              if(newValue.timeOut){
                if(newValue.timeOut == 1){
                  this.times.live=false;
                  clearInterval(this.appTimer);
                }else{
                  this.times.live=true;
                  clearInterval(this.appTimer);
                  this.Refresh(newValue.timeOut);
                }
              }

            }
        },
        // immediate: true,
        deep: true
    },
    appsList:{
      handler(newVal,oldVal){

        for(let k=0;k<newVal.length;k++){
          for(let m=0;m<oldVal.length;m++){
            if(newVal[k].apdex != undefined && oldVal[m].apdex !=undefined){
                if(parseFloat(newVal[k].apdex)>parseFloat(oldVal[m].apdex)){
                  newVal[k].apdexFlag = true;
                }else{
                  newVal[k].apdexFlag = false;
                }
            }
           if(newVal[k].latency != undefined && oldVal[m].latency != undefined){
             if(parseFloat(newVal[k].latency)>parseFloat(oldVal[m].latency)){
                newVal[k].latencyFlag = true;
              }else{
                newVal[k].latencyFlag = false;
              }
           }

            if(newVal[k].rate != undefined && oldVal[m].rate != undefined){
              if(parseFloat(newVal[k].rate)>parseFloat(oldVal[m].rate)){
                newVal[k].rateFlag = true;
              }else{
                newVal[k].rateFlag = false;
              }
            }

            if(newVal[k].errorRate != undefined && oldVal[m].errorRate != undefined){
               if(parseFloat(newVal[k].errorRate)>parseFloat(oldVal[m].errorRate)){
                newVal[k].aerrorRateFlag = true;
              }else{
                newVal[k].errorRateFlag = false;
              }
            }

          }
        }

        if(newVal){
          this.appsList = newVal;
          this.draw_gauge();
        }
        deep: true
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.appTimer);
  },
  methods:{
     Refresh(timeOut){
      this.appTimer = setInterval(()=>{
        this.getList();
      },timeOut)
    },
     beforeUpload(file) {
      const isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
        return
      }
      const isJPG = ['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/JPEG 格式!')
        return
      }
      return isRightSize && isJPG
    },
    uploadSuccess(response, file, fileList) {
      this.form.imgUrl = process.env.VUE_APP_BASE_API + response.data.full_path
    },
    toggle(){
      this.$router.push({
        path:'disposition/index'
      })
    },
     // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
     // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        alias: undefined,
        desc: undefined,
        imgUrl:undefined,
        contractInfo:undefined,
        contractPhone:undefined
      }
      this.resetForm('form')
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      // this.getMenuTreeselect(0)
      this.open = true
      this.title = '添加应用'
      this.isEdit = false
    },
     /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id !== undefined) {
            updateOtApps(this.form, this.form.id).then(response => {
              if (response.code === 200) {
                this.msgSuccess(response.msg)
                this.open = false
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          } else {
            addOtApps(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess(response.msg)
                this.open = false
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    },
    //获取所有应用
    getList() {
      // this.loading = true;
      // storage.set('lists',this.appsList);
      listApps({pageIndex:0,pageSize:200}).then(
        res => {
          let req_applist =[]
          let app_ids =[]
          if(res.code == 200){
            // this.appsList = res.data.list
            let arr = res.data.list;
             res.data.list.map((item)=>{
              req_applist.push({app_alias:item.alias});
              app_ids.push(item.id)
             })
            this.queryNums.app_ids = app_ids.join(',');
            this.queryScore.req_applist= req_applist;
            if(req_applist.length>0){
              appsScore(this.queryScore).then(res=>{
                // const lists= storage.get('lists')
                if(res.code == 200){
                  if(res.data.scores !=null){
                    for(let i=0;i<arr.length;i++){
                      for(let j=0;j<res.data.scores.length;j++){
                        if(arr[i].alias == res.data.scores[j].app_alias){
                          arr[i] = Object.assign({},arr[i], res.data.scores[j])
                        }

                      }
                    }
                    eventNums(this.queryNums).then((res)=>{
                      if(res.code == 200){
                        if(res.data.list.length!=0){
                          for(let i=0;i<arr.length;i++){
                            for(let j=0;j<res.data.list.length;j++){
                              if(arr[i].id == res.data.list[j].app_id){
                                arr[i] = Object.assign({},arr[i], res.data.list[j])
                              }else{
                                arr[i].exception_num = undefined;
                              }
                            }
                          }
                        }
                      }
                      this.appsList=arr;
                    })

                    this.$nextTick(()=>{
                      this.$forceUpdate();
                      // this.$children[0].$children[0].$forceUpdate()

                    })


                  }
                  setTimeout(()=>{
                    if(this.appsList.length==0 || this.appsList == null){
                        this.toggle();
                    }
                    },300)


                }
              })

            }

          }
        }
      )
    },
    go(router,item){
      const start_time=this.times.start_time
      const end_time=this.times.end_time
      const live = this.times.live
      this.$router.push({
        path:router,
        query:{
          id:item.id,
          app_alias:item.alias,
          start_time,
          end_time,
          item:item,
          live:live
        }
      })
			storage.set('appsItem',item);
		},
    draw_gauge(){
      var myEchart = this.$el.getElementsByClassName('echartsbox');
      // var myEchart = this.$refs.gauge;
      for (var i = 0; i < myEchart.length; i++) {
        var myChart = this.$echarts5.init(myEchart[i]);
        let option = {
          animationEasing: _animationEasingUpdate,
          animationDuration: _animationDuration,
          animationDurationUpdate: _animationDurationUpdate,
          animationEasingUpdate: _animationEasingUpdate,
          // dataset: {
          //   source: [[1, 156]]
          // },
          tooltip: {},
          angleAxis: {
            type: 'value',
            startAngle: 0,
            show: false,
            min: 0,
            max: _valOnRadianMax
          },
          radiusAxis: {
            type: 'value',
            show: false
          },
          polar: {},
          series: [
            {
              type: 'custom',
              coordinateSystem: 'polar',
              renderItem: this.renderItem,
              // data: this.appsList[i].apdex==undefined?0:(parseFloat((this.appsList[i].apdex)).toFixed(2))*100
              data:[
                {
                  value:this.appsList[i].apdex==undefined?0:((parseFloat((this.appsList[i].apdex)).toFixed(2))*100)-1
                }
              ]
            }
          ]
        };

       myChart.setOption(option,true);
      }
    },
    renderItem(params, api) {
      let _this = this;
      var valOnRadian = api.value(1);
      var coords = api.coord([api.value(0), valOnRadian]);
      var polarEndRadian = coords[3];
      var imageStyle = {
        image: _this.panelImageURL,
        x: params.coordSys.cx - _outerRadius,
        y: params.coordSys.cy - _outerRadius,
        width: _outerRadius * 2,
        height: _outerRadius * 2
      };
      return {
        type: 'group',
        children: [
          {
            type: 'image',
            style: imageStyle,
            clipPath: {
              type: 'sector',
              shape: {
                cx: params.coordSys.cx,
                cy: params.coordSys.cy,
                r: _outerRadius,
                r0: _innerRadius,
                startAngle: 0,
                endAngle: -polarEndRadian,
                transition: 'endAngle',
                enterFrom: { endAngle: 0 }
              }
            }
          },
          {
            type: 'image',
            style: imageStyle,
            clipPath: {
              type: 'polygon',
              shape: {
                points: _this.makePionterPoints(params, polarEndRadian)
              },
              extra: {
                polarEndRadian: polarEndRadian,
                transition: 'polarEndRadian',
                enterFrom: { polarEndRadian: 0 }
              },
              during: (apiDuring)=> {
                apiDuring.setShape(
                  'points',
                  _this.makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
                );
              }
            }
          },
          {
            type: 'circle',
            shape: {
              cx: params.coordSys.cx,
              cy: params.coordSys.cy,
              r: _insidePanelRadius
            },
            style: {
              fill: '#fff',
              shadowBlur: 25,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: 'rgba(76,107,167,0.4)'
            }
          },
          {
            type: 'text',
            extra: {
              valOnRadian: valOnRadian,
              transition: 'valOnRadian',
              enterFrom: { valOnRadian: 0 }
            },
            style: {
              text: makeText(valOnRadian),
              // fontSize: 50,
              fontSize: 30,
              fontWeight: 700,
              x: params.coordSys.cx,
              y: params.coordSys.cy,
              fill: 'rgb(0,50,190)',
              align: 'center',
              verticalAlign: 'middle',
              enterFrom: { opacity: 0 }
            },
            during: function (apiDuring) {
              apiDuring.setStyle(
                'text',
                makeText(apiDuring.getExtra('valOnRadian'))
              );
            }
          }
        ]
      };
    },
    convertToPolarPoint(renderItemParams, radius, radian) {
      return [
        Math.cos(radian) * radius + renderItemParams.coordSys.cx,
        -Math.sin(radian) * radius + renderItemParams.coordSys.cy
      ];
    },
    makePionterPoints(renderItemParams, polarEndRadian) {
      return [
        this.convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
        this.convertToPolarPoint(
          renderItemParams,
          _outerRadius,
          polarEndRadian + Math.PI * 0.03
        ),
        this.convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
      ];
    },
  },
  mounted(){

    // this.$refs.badgebox.$forceUpdate();
    setTimeout(()=>{
      this.draw_gauge()
      //  this.$refs.badgebox.$forceUpdate();
    },1000)
    this.$forceUpdate();

    // this.$children[0].$children[0].$forceUpdate()
      // this.draw_gauge()
  }
}
</script>

<style lang="scss" scoped>
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}
p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
		font-size: 16px;
}
h6 {
    display: block;
    font-size: 0.67em;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.content{
	margin-top:10px;
	padding-left:25px;
	.listwrap{
		display: flex;
		justify-content: start;
		flex-wrap:wrap;
		li{
			width:148px;
			height: 80px;
		    cursor: pointer;
		    font-size: 12px;
		    position: relative;
		    overflow: hidden;
		    color: #666;
		    background: #fff;
		    -webkit-box-shadow: 4px 4px 40px rgba(0,0,0,.05);
		    box-shadow: 4px 4px 40px rgba(0,0,0,.05);
		    border-color: rgba(0,0,0,.05);
		    border-radius: 10px;
		    margin:5px;
		    text-align: center;
		    box-sizing: border-box;
		    padding:10px;
		    p{
		    	color:#fff;
		    	font-size:14px;
		    	height: 42px;
	    	  overflow: hidden;
			    text-overflow:ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
		    }
		    h6{
		    	font-size:16px;
		    	// margin-top:5px;
		    	color:#fff;
					font-weight: normal;
		    }
		    &:hover{
		    	transform: scale(1.1);
		    }
		}

	}
  .isFixed {
    position: fixed;
    background-color: #fff;
    top: 0;
    z-index: 999;
  }
}
.appsys_tit{
	/*width:150px;*/
	margin:0.375rem 0 0.125rem 0;
	/*border-bottom:1px solid #2e5596;*/
	color:#363e4f;
	display: flex;
	justify-content: flex-start;
	.appsys_tit_l{
		span{
			display: inline-block;
			width:0.2rem;
			height:0.2rem;
			margin-right:0.125rem;
			background:#363e4f;
			transform: rotate(45deg);
			color:#fff;
			text-align: center;
			line-height: 0.2rem;
			margin-left:0.0625rem;
			i{
				width:16px;
				height:16px;
				line-height: 16px;
				text-align: center;
				color:#fff;
				display: inline-block;
				font-style: normal;
				transform:rotate(-45deg);
				font-size:12px;
			}
		}
	}
	.appsys_tit_r{
		/*flex:1;*/
		/*width:100px;*/
		margin-left:-10px;
		border-bottom:1px solid #363e4f;
		text-indent: 15px;
		/*font-weight: bold;*/
		position: relative;
		padding-right:15px;
		font-size:15px;
		color:#363e4f;
		/*span:nth-of-type(1){
			width:0;
			height: 0;
			border-width:0 8px 8px;
			border-style: solid;
			border-color:transparent transparent #2e5596;
			position: absolute;
			right:10px;
			top:13px;
		}
		span:nth-of-type(2){
			width:0;
			height: 0;
			border-width:0 8px 8px;
			border-style: solid;
			border-color:transparent transparent #2e5596;
			position: absolute;
			right:30px;
			top:13px;
		}
		span:nth-of-type(3){
			width:0;
			height: 0;
			border-width:0 8px 8px;
			border-style: solid;
			border-color:transparent transparent #2e5596;
			position: absolute;
			right:50px;
			top:13px;
		}*/
	}

}


//应用new
::v-deep .el-badge__content.is-fixed{
  right:0.3rem !important;
  top: 0.125rem;
}
::v-deep .el-badge__content{
  border:none;
  // line-height: 0.125rem;
  // font-weight: 500;
  // width:0.2rem;
  // height:0.2rem;
  // padding:0.0375rem;
  // border-radius: 50%;
  // text-indent: -2px;
}
.Apply_box{
  width: 100%;
  // height: 2.45rem;
  background: #FFFFFF;
  border-radius: 0.1rem;
  border: 1px solid #E9E9E9;
  border-radius: 0.1rem 0.1rem 0px 0px;
  .Apply_title{
    height: 0.45rem;
    line-height: 0.45rem;
    background:rgba(145, 164, 193, 0.28);
    box-sizing: border-box;
    padding-left:0.2rem;
    padding-right:0.2rem;
    display: flex;
    justify-content: space-between;
    font-weight: 400;
    font-size: 0.175rem;

    .circle{
      display: inline-block;
      width: 0.1rem;
      height: 0.1rem;
      // background: #03E566;
      color:#00B54F;
      border-radius: 50%;
      margin-right: 0.05rem;
    }
    .gc{
      // background: #66DC4A;
      background:#00B54F;
    }
    .bc{
      background: #60B4F9;
    }
    .grc{
      background: #8B8B8B;
    }
    .oc{
      background: #F1A657;
    }
    .rc{
      background: #EA463D;
    }
    .title_img{
      display: inline-block;
      width: 0.15rem;
      height: 0.175rem;
      margin-right:0.2rem;
      vertical-align: middle;
    }
    .badge{
      //  margin-top: 10px;
      // margin-right: 40px;
      margin-top:-3px;

    }

  }
  .Apply_content{
    box-sizing: border-box;
    padding:0.2rem;
    display: flex;
    .Apply_l{
      width: 1.6rem;
      height: 1.6rem;
      // border: 2px solid #54CCFF;
      // border-radius: 50%;
      // min-width: 1.6rem;
      // margin-right:0.25rem;
      // width:1.625rem;
      // height:1.625rem;
      min-width: 1.6rem;
      // width:100%;
      // height: 100%;

    }
    .green{
      border: 2px solid #66DC4A;
    }
    .blue{
      border: 2px solid #60B4F9;
    }
    .gray{
      border: 2px solid #8B8B8B;
    }
    .orange{
      border: 2px solid #F1A657;
    }
    .red{
      border: 2px solid #EA463D;
    }
    .Apply_r{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content:space-between;
      //  display: grid;
      //  place-items: center; /* 水平垂直居中 */
      .Apply_r_list{
        width: 1.0625rem;
        height: 0.625rem;
        background: #E3E7ED;
        border-radius: 0.1rem;
        text-align: center;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4E5969;
        font-size: 0.15rem;
        box-sizing: border-box;
        padding-top:0.075rem;
        padding-bottom: 0.075rem;
      }
      .value{
        line-height: 0.225rem;
        font-size: 0.15rem;
      }
      .value,.label{
        line-height: 0.225rem;
        font-size: 0.15rem;
      }
    }
    .arrow{
      width:0.1rem;
      height:0.125rem;
      margin-left:0.1rem;
    }
  }
}
@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');
}
// @font-face {
//   font-family: "iconfont"; /* Project id 4241886 */
//   src: url('iconfont.woff2?t=1694073621780') format('woff2'),
//        url('iconfont.woff?t=1694073621780') format('woff'),
//        url('iconfont.ttf?t=1694073621780') 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: fixed;
  top:60px;
  right:0px;
  width:20px;
  height:20px;
  z-index: 2;
}
.addCard {
  border: 2px dotted #e9e9e9;
  border-radius: 2px;
  height: 221px;
}
.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;
}
::v-deep .el-row{
  display:flex;
  flex-wrap: wrap;

}
</style>
