Merge remote-tracking branch 'origin/master'

zhangherong

2025-03-07 36e8795b59c7f7393758ca96e0c2438eddaee8be

 src/views/mdc/base/modules/WorkshopSignage/EquipmentDetailModal.vue

@@ -20,7 +20,7 @@
          style="border-collapse: separate;border-spacing:0px; color: #fff"
        >
          <tr>
            <td v-if="this.spindlebeilv != null">
            <td>
              <div
                class="mdcEquipMon"
                style="width: 250px; height: 200px;margin : 0 auto;padding: 0;"
@@ -34,7 +34,8 @@
                ></div>
              </div>
            </td>
            <td v-if="this.feedbeilv != null">

            <td>
              <div
                class="mdcEquipMon"
                style="width: 210px; height: 180px;margin : 0 auto;"
@@ -48,7 +49,8 @@
                ></div>
              </div>
            </td>
            <td v-if="this.spindleload != null">

            <td v-if="resultData.driveType!=='HNC8'||resultData.driveType!=='HNC7'||resultData.driveType!=='LSV2'">
              <div
                class="mdcEquipMon"
                style="width: 210px; height: 180px;margin : 0 auto;"
@@ -61,7 +63,8 @@
                ></div>
              </div>
            </td>
            <td v-if="this.rapidfeed != null">

            <td v-else>
              <div
                class="mdcEquipMon"
                style="width: 210px; height: 180px;margin : 0 auto;"
@@ -81,148 +84,30 @@
                title="基础信息"
                :column="4"
              >
                <a-descriptions-item label="设备编号">{{resultData.equipmentID|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="设备名称">{{resultData.equipmentName|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="IP地址">{{resultData.equipmentIP|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="端口号">{{resultData.dataPort|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="系统版本号">{{resultData.systemVersion|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="驱动类型">{{resultData.driveType|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="设备型号">{{resultData.equipmentModel|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="设备类型">{{resultData.deviceType|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="设备功率">{{resultData.devicePower|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="有效轴数">{{resultData.validAxis|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="最大轴数">{{resultData.maxAxis|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="备注">{{resultData.remark|formatDescriptionsItem}}</a-descriptions-item>
                <a-descriptions-item label="设备编号">{{ resultData.equipmentID|formatDescriptionsItem }}
                </a-descriptions-item>
                <a-descriptions-item label="设备名称">{{ resultData.equipmentName|formatDescriptionsItem }}
                </a-descriptions-item>
                <a-descriptions-item label="IP地址">{{ resultData.equipmentIP|formatDescriptionsItem }}
                </a-descriptions-item>
                <a-descriptions-item label="端口号">{{ resultData.dataPort|formatDescriptionsItem }}
                </a-descriptions-item>
                <a-descriptions-item label="系统版本号">{{ resultData.systemVersion|formatDescriptionsItem }}
                </a-descriptions-item>
                <a-descriptions-item label="驱动类型">{{ resultData.driveType|formatDescriptionsItem }}
                </a-descriptions-item>
                <a-descriptions-item label="设备型号">{{ resultData.equipmentModel|formatDescriptionsItem }}
                </a-descriptions-item>
                <a-descriptions-item label="设备类型">{{ resultData.deviceType|formatDescriptionsItem }}
                </a-descriptions-item>
                <a-descriptions-item label="设备功率">{{ resultData.devicePower|formatDescriptionsItem }}
                </a-descriptions-item>
                <a-descriptions-item label="有效轴数">{{ resultData.validAxis|formatDescriptionsItem }}
                </a-descriptions-item>
                <a-descriptions-item label="最大轴数">{{ resultData.maxAxis|formatDescriptionsItem }}
                </a-descriptions-item>
                <a-descriptions-item label="备注">{{ resultData.remark|formatDescriptionsItem }}</a-descriptions-item>
              </a-descriptions>

              <!-- <a-descriptions
                title="运行数据"
                v-if="driverType != 'LSV2' && driverType != 'ZUOLAN' "
                :column="4"
              >
                <a-descriptions-item label="主轴倍率(%)">{{resultData.spindlebeilv}}</a-descriptions-item>
                <a-descriptions-item label="进给倍率(%)">{{resultData.feedbeilv}}</a-descriptions-item>
                <a-descriptions-item label="主轴负荷(%)">{{resultData.spindleload}}</a-descriptions-item>
                <a-descriptions-item label="主轴转速(rpm)">{{resultData.spindlespeed}}</a-descriptions-item>
                <a-descriptions-item label="进给速度(mm/min)">{{resultData.feedrate}}</a-descriptions-item>
              </a-descriptions>

              <a-descriptions
                title="运行数据 for lsv2"
                v-if="driverType == 'LSV2'"
                :column="4"
              >
                <a-descriptions-item label="主轴倍率(%)">{{resultData.spindlebeilv}}</a-descriptions-item>
                <a-descriptions-item label="设备正常运行时间">{{resultData.equipmentNormalTime}}</a-descriptions-item>
                <a-descriptions-item label="快速进给倍率(%)">{{resultData.rapidfeed}}</a-descriptions-item>
                <a-descriptions-item label="NC正常运行时间">{{resultData.nCNormalTime}}</a-descriptions-item>
                <a-descriptions-item label="进给倍率(%)">{{resultData.feedbeilv}}</a-descriptions-item>
                <a-descriptions-item label="设备运行时间">{{resultData.equipmentTime}}</a-descriptions-item>
                <a-descriptions-item label="当前刀具号">{{resultData.toolNum}}</a-descriptions-item>
              </a-descriptions> -->

              <!-- <a-descriptions
                title="程序信息"
                v-if="driverType != 'LSV2' && driverType != 'ZUOLAN' "
                :column="4"
              >
                <a-descriptions-item label="序列号">{{resultData.sequencenumber}}</a-descriptions-item>
                <a-descriptions-item
                  label="当前执行代码"
                  :span="2"
                >{{resultData.executingcode}}</a-descriptions-item>
                <a-descriptions-item label="工件名称">{{resultData.productName}}</a-descriptions-item>
              </a-descriptions> -->

              <!-- <a-descriptions
                title="程序信息  for lsv2"
                v-if="driverType == 'LSV2'"
                :column="4"
              >
                <a-descriptions-item label="当前程序">{{resultData.program}}</a-descriptions-item>
                <a-descriptions-item label="程序执行点">{{resultData.programPosition}}</a-descriptions-item>
                <a-descriptions-item label="操作模式">{{resultData.operationType}}</a-descriptions-item>
                <a-descriptions-item label="错误信息编号一">{{resultData.firstErrorNum}}</a-descriptions-item>
                <a-descriptions-item label="错误信息一">{{resultData.firstError}}</a-descriptions-item>
                <a-descriptions-item label="错误信息">{{resultData.errorinfo}}</a-descriptions-item>
                <a-descriptions-item label="错误信息编号二">{{resultData.secondErrorNum}}</a-descriptions-item>
                <a-descriptions-item label="错误信息二">{{resultData.secondError}}</a-descriptions-item>
              </a-descriptions> -->

              <!--<a-descriptions
                title="轴监控数据 fro SIEMENS840DSL"
                v-if="driverType == 'SIEMENS840DSL'"
                :column="4"
              >
                <a-descriptions-item label="X轴温度">{{resultData.temperatureX}}</a-descriptions-item>
                <a-descriptions-item label="Y轴温度">{{resultData.temperatureY}}</a-descriptions-item>
                <a-descriptions-item label="Z轴温度">{{resultData.temperatureZ}}</a-descriptions-item>
                <a-descriptions-item label="A轴温度">{{resultData.temperatureA}}</a-descriptions-item>
                <a-descriptions-item label="B轴温度">{{resultData.temperatureB}}</a-descriptions-item>
                <a-descriptions-item label="X轴电流">{{resultData.equipmentCurrentX}}</a-descriptions-item>
                <a-descriptions-item label="Y轴电流">{{resultData.equipmentCurrentY}}</a-descriptions-item>
                <a-descriptions-item label="Z轴电流">{{resultData.equipmentCurrentZ}}</a-descriptions-item>
                <a-descriptions-item label="A轴电流">{{resultData.equipmentCurrentA}}</a-descriptions-item>
                <a-descriptions-item label="B轴电流">{{resultData.equipmentCurrentB}}</a-descriptions-item>
                <a-descriptions-item label="X轴随动误差">{{resultData.equipmentLagErrorX}}</a-descriptions-item>
                <a-descriptions-item label="Y轴随动误差">{{resultData.equipmentLagErrorY}}</a-descriptions-item>
                <a-descriptions-item label="Z轴随动误差">{{resultData.equipmentLagErrorZ}}</a-descriptions-item>
                <a-descriptions-item label="A轴随动误差">{{resultData.equipmentLagErrorA}}</a-descriptions-item>
                <a-descriptions-item label="B轴随动误差">{{resultData.equipmentLagErrorB}}</a-descriptions-item>
              </a-descriptions>
-->
              <!-- <a-descriptions
                title="坐标信息 "
                v-if="driverType == 'FANUC'"
                :column="3"
              >
                <a-descriptions-item label="绝对坐标X">{{resultData.xabsolute}}</a-descriptions-item>
                <a-descriptions-item label="绝对坐标Y">{{resultData.yabsolute}}</a-descriptions-item>
                <a-descriptions-item label="绝对坐标Z">{{resultData.zabsolute}}</a-descriptions-item>
                <a-descriptions-item label="机床坐标X">{{resultData.xmachine}}</a-descriptions-item>
                <a-descriptions-item label="机床坐标Y">{{resultData.ymachine}}</a-descriptions-item>
                <a-descriptions-item label="机床坐标Z">{{resultData.zmachine}}</a-descriptions-item>
              </a-descriptions>

              <a-descriptions
                title="坐标信息 for lsv2"
                v-if="driverType == 'LSV2'"
                :column="4"
              >
                <a-descriptions-item label="X坐标">{{resultData.xmachine}}</a-descriptions-item>
                <a-descriptions-item label="Y坐标">{{resultData.ymachine}}</a-descriptions-item>
                <a-descriptions-item label="Z坐标">{{resultData.zmachine}}</a-descriptions-item>
                <a-descriptions-item label="A坐标">{{resultData.amachine}}</a-descriptions-item>
                <a-descriptions-item label="B坐标">{{resultData.bmachine}}</a-descriptions-item>
                <a-descriptions-item label="C坐标">{{resultData.cmachine}}</a-descriptions-item>
              </a-descriptions>

              <a-descriptions
                title="坐标信息 for lsv2"
                v-if="driverType == 'LSV2'"
                :column="4"
              >
                <a-descriptions-item label="X坐标">{{resultData.xmachine}}</a-descriptions-item>
                <a-descriptions-item label="Y坐标">{{resultData.ymachine}}</a-descriptions-item>
                <a-descriptions-item label="Z坐标">{{resultData.zmachine}}</a-descriptions-item>
                <a-descriptions-item label="A坐标">{{resultData.amachine}}</a-descriptions-item>
                <a-descriptions-item label="B坐标">{{resultData.bmachine}}</a-descriptions-item>
                <a-descriptions-item label="C坐标">{{resultData.cmachine}}</a-descriptions-item>
              </a-descriptions>

              <a-descriptions
                title="坐标信息"
                v-if="driverType == 'LSV2'"
                :column="4"
              >
                <a-descriptions-item label="X坐标">{{resultData.xmachine}}</a-descriptions-item>
                <a-descriptions-item label="Y坐标">{{resultData.ymachine}}</a-descriptions-item>
                <a-descriptions-item label="Z坐标">{{resultData.zmachine}}</a-descriptions-item>
                <a-descriptions-item label="A坐标">{{resultData.amachine}}</a-descriptions-item>
                <a-descriptions-item label="B坐标">{{resultData.bmachine}}</a-descriptions-item>
                <a-descriptions-item label="C坐标">{{resultData.cmachine}}</a-descriptions-item>
              </a-descriptions> -->
              <!---数据源调整  动态展示 运行数据---->

              <a-descriptions
                title="运行数据"
@@ -239,40 +124,14 @@
                >
                  <a-tooltip @mouseenter="mouseEnterItem">
                    <template slot="title">
                      {{item.value|formatDescriptionsItem}}
                      {{ item.value|formatDescriptionsItem }}
                    </template>
                    <div class="description-item-class">{{item.value|formatDescriptionsItem}}</div>
                    <div class="description-item-class">{{ item.value|formatDescriptionsItem }}</div>
                  </a-tooltip>

                </a-descriptions-item>

              </a-descriptions>

              <!--<a-descriptions-->
              <!--title="坐标信息"-->
              <!--v-show="xyzAliasesList != null"-->
              <!--v-if="driverType != 'PLC'"-->
              <!--:column="4"-->
              <!--&gt;-->
              <!--<a-descriptions-item-->
              <!--v-for="(item,id) in xyzAliasesList  "-->
              <!--:key="item.id"-->
              <!--:label="item.title"-->
              <!--&gt;{{item.value}}</a-descriptions-item>-->
              <!--</a-descriptions>-->

              <!--<a-descriptions-->
                <!--title="版本信息 for lsv2"-->
                <!--v-if="driverType == 'LSV2'"-->
                <!--:column="4"-->
                <!--class="lsv2Data"-->
              <!--&gt;-->
                <!--<a-descriptions-item label="NC版本">{{resultData.ncversion}}</a-descriptions-item>-->
                <!--<a-descriptions-item label="TNC版本">{{resultData.tncversion}}</a-descriptions-item>-->
                <!--<a-descriptions-item label="OPT版本">{{resultData.optversion}}</a-descriptions-item>-->
                <!--<a-descriptions-item label="PLC版本">{{resultData.plcversion}}</a-descriptions-item>-->
              <!--</a-descriptions>-->

            </td>
          </tr>
        </table>
@@ -290,1253 +149,1251 @@
</template>

<script>
  import {
    getAction,
    postAction
  } from '@/api/manage'
  import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
  import Template1 from '../../../../jeecg/JVxeDemo/layout-demo/Template1'
import {
  getAction,
  postAction
} from '@/api/manage'
import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
import Template1 from '../../../../jeecg/JVxeDemo/layout-demo/Template1'

  export default {
    name: 'EqumentDetaiModal',
    components: { Template1 },
    props: {},
    data() {
      return {
        mdcDriveTypeParamConfigList: [],
        xyzAliasesList: [],
        title: '',
        //主轴倍率
        spindlebeilv: 1,
        //进给倍率
        feedbeilv: 1,
        // 主轴负荷
        spindleload: 1,
        //快速进给倍率
        rapidfeed: 1,
        visible: false,
        resultData: {},
        driverType: '',
        deviceTypeDict: '',
        url: {
          mdcEquipmentDetailedInfo: '/mdc/mdcEquipment/mdcEquipmentDetailedInfo'
        },
        modalTimer: null,
        ee: ' ',
        modalNode: null,
        timeout: null
      }
    },
    mounted() {

    },
    watch: {},
    filters:{
      formatDescriptionsItem(value){
        return value?value:'无'
      }
    },
    methods: {
      drawLine() {
        let _this = this
        if (_this.spindlebeilv) {
          //基于准备好的dom，初始化echarts实例
          let mdcEquiMoniGauge1 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge1'), 'macarons')
          let mdcEquiMoniGaugeOption1 = {
            tooltip: {
              formatter: '{a} <br/>{b} : {c}%'
            },

            series: [{
              name: '外部线',
              type: 'gauge',
              radius: '65%', // 动态
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  color: [
                    [1, '#31F3FF'] // 动态
                  ],
                  width: 1
                }
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              detail: {
                show: false
              },
              title: { //标题
                show: false
              }
            },
              {
                name: '外部刻度',
                type: 'gauge',
                radius: '80%',
                min: 0, //最小刻度
                max: 300, //最大刻度
                splitNumber: 10, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: [
                      [1, 'rgba(0,0,0,0)']
                    ]
                  }
                }, //仪表盘轴线
                axisLabel: {
                  show: true,
                  color: '#31F3FF',
                  fontSize: 10, // 动态
                  distance: -20 // 动态

                }, //刻度标签。
                axisTick: {
                  show: false
                }, //刻度样式
                splitLine: {
                  show: false
                }
              },
              {
                name: '内部宽线条',
                type: 'gauge',
                radius: '55%',
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [1, '#122B3C']
                    ],
                    width: 4
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '内部细线条',
                type: 'gauge',
                radius: '40%',
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [1, '#122B3C']
                    ],
                    width: 3
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '间隔条形',
                type: 'gauge',
                radius: '52.5%',
                z: 4,
                splitNumber: 35,
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    opacity: 0
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false,
                  length: 20,
                  splitNumber: 1,
                  lineStyle: {
                    color: '#122B3C',
                    width: 1
                  }
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '数据',
                type: 'gauge',
                radius: '52.5%',
                z: 3,
                startAngle: 225,
                max: 300,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [_this.spindlebeilv / 300, '#31F3FF'], // 动态
                      [1, '#185363']
                    ],
                    width: 4
                  }
                },
                tooltip: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: true,
                  fontWeight: 'bold',
                  fontSize: 12,
                  color: '#fff'
                },
                pointer: {
                  show: true,
                  width: 3,
                  itemStyle:{
                    color:'#fff'
                  }
                },
                data: [{
                  name: '',
                  value: _this.spindlebeilv
                }]
              },
              // 内圆
              {
                'name': '内圆环',
                'type': 'pie',
                'radius': ['4%', '2%'],
                'hoverAnimation': false,
                tooltip: {
                  show: false
                },
                cursor: 'default',
                'labelLine': {
                  'normal': {
                    'show': false
                  }
                },
                itemStyle: {
                  color: '#fff'
                },
                animation: false,
                'data': [1]
              },
              // 内圆
              {
                'name': '内圆环2',
                'type': 'pie',
                'radius': '2%',
                'hoverAnimation': false,
                cursor: 'default',
                tooltip: {
                  show: false
                },
                'labelLine': {
                  'normal': {
                    'show': false
                  }
                },
                itemStyle: {
                  color: '#31F3FF'
                },
                animation: false,
                'data': [1]
              }
            ]
          }
          mdcEquiMoniGauge1.setOption(mdcEquiMoniGaugeOption1)
        }
        if (_this.feedbeilv) {
          let mdcEquiMoniGauge2 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge2'), 'macarons')
          let mdcEquiMoniGaugeOption2 = {
            tooltip: {
              formatter: '{a} <br/>{b} : {c}%'
            },

            series: [{
              name: '外部线',
              type: 'gauge',
              radius: '65%', // 动态
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  color: [
                    [1, '#31F3FF'] // 动态
                  ],
                  width: 1
                }
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              detail: {
                show: false
              },
              title: { //标题
                show: false
              }
            },
              {
                name: '外部刻度',
                type: 'gauge',
                radius: '80%',
                min: 0, //最小刻度
                max: 300, //最大刻度
                splitNumber: 10, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: [
                      [1, 'rgba(0,0,0,0)']
                    ]
                  }
                }, //仪表盘轴线
                axisLabel: {
                  show: true,
                  color: '#31F3FF',
                  fontSize: 10, // 动态
                  distance: -20 // 动态

                }, //刻度标签。
                axisTick: {
                  show: false
                }, //刻度样式
                splitLine: {
                  show: false
                }
              },
              {
                name: '内部宽线条',
                type: 'gauge',
                radius: '55%',
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [1, '#122B3C']
                    ],
                    width: 4
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '内部细线条',
                type: 'gauge',
                radius: '40%',
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [1, '#122B3C']
                    ],
                    width: 3
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '间隔条形',
                type: 'gauge',
                radius: '52.5%',
                z: 4,
                splitNumber: 35,
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    opacity: 0
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false,
                  length: 20,
                  splitNumber: 1,
                  lineStyle: {
                    color: '#122B3C',
                    width: 1
                  }
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '数据',
                type: 'gauge',
                radius: '52.5%',
                z: 3,
                startAngle: 225,
                max: 300,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [_this.feedbeilv / 300, '#31F3FF'], // 动态
                      [1, '#185363']
                    ],
                    width: 4
                  }
                },
                tooltip: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: true,
                  fontWeight: 'bold',
                  fontSize: 12,
                  color: '#fff'
                },
                pointer: {
                  show: true,
                  width: 3,
                  itemStyle:{
                    color:'#fff'
                  }
                },
                data: [{
                  name: '',
                  value: _this.feedbeilv
                }]
              },
              // 内圆
              {
                'name': '内圆环',
                'type': 'pie',
                'radius': ['4%', '2%'],
                'hoverAnimation': false,
                tooltip: {
                  show: false
                },
                cursor: 'default',
                'labelLine': {
                  'normal': {
                    'show': false
                  }
                },
                itemStyle: {
                  color: '#fff'
                },
                animation: false,
                'data': [1]
              },
              // 内圆
              {
                'name': '内圆环2',
                'type': 'pie',
                'radius': '2%',
                'hoverAnimation': false,
                cursor: 'default',
                tooltip: {
                  show: false
                },
                'labelLine': {
                  'normal': {
                    'show': false
                  }
                },
                itemStyle: {
                  color: '#31F3FF'
                },
                animation: false,
                'data': [1]
              }
            ]
          }
          mdcEquiMoniGauge2.setOption(mdcEquiMoniGaugeOption2)
        }
        if (_this.spindleload) {
          let mdcEquiMoniGauge3 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge3'), 'macarons')
          let mdcEquiMoniGaugeOption3 = {
            tooltip: {
              formatter: '{a} <br/>{b} : {c}%'
            },

            series: [{
              name: '外部线',
              type: 'gauge',
              radius: '65%', // 动态
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  color: [
                    [1, '#31F3FF'] // 动态
                  ],
                  width: 1
                }
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              detail: {
                show: false
              },
              title: { //标题
                show: false
              }
            },
              {
                name: '外部刻度',
                type: 'gauge',
                radius: '80%',
                min: 0, //最小刻度
                max: 100, //最大刻度
                splitNumber: 10, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: [
                      [1, 'rgba(0,0,0,0)']
                    ]
                  }
                }, //仪表盘轴线
                axisLabel: {
                  show: true,
                  color: '#31F3FF',
                  fontSize: 10, // 动态
                  distance: -20 // 动态

                }, //刻度标签。
                axisTick: {
                  show: false
                }, //刻度样式
                splitLine: {
                  show: false
                }
              },
              {
                name: '内部宽线条',
                type: 'gauge',
                radius: '55%',
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [1, '#122B3C']
                    ],
                    width: 4
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '内部细线条',
                type: 'gauge',
                radius: '40%',
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [1, '#122B3C']
                    ],
                    width: 3
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '间隔条形',
                type: 'gauge',
                radius: '52.5%',
                z: 4,
                splitNumber: 35,
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    opacity: 0
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false,
                  length: 20,
                  splitNumber: 1,
                  lineStyle: {
                    color: '#122B3C',
                    width: 1
                  }
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '数据',
                type: 'gauge',
                radius: '52.5%',
                z: 3,
                startAngle: 225,
                max: 100,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [_this.spindleload / 100, '#31F3FF'], // 动态
                      [1, '#185363']
                    ],
                    width: 4
                  }
                },
                tooltip: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: true,
                  fontWeight: 'bold',
                  fontSize: 12,
                  color: '#fff'
                },
                pointer: {
                  show: true,
                  width: 3,
                  itemStyle:{
                    color:'#fff'
                  }
                },
                data: [{
                  name: '',
                  value: _this.spindleload
                }]
              },
              // 内圆
              {
                'name': '内圆环',
                'type': 'pie',
                'radius': ['4%', '2%'],
                'hoverAnimation': false,
                tooltip: {
                  show: false
                },
                cursor: 'default',
                'labelLine': {
                  'normal': {
                    'show': false
                  }
                },
                itemStyle: {
                  color: '#fff'
                },
                animation: false,
                'data': [1]
              },
              // 内圆
              {
                'name': '内圆环2',
                'type': 'pie',
                'radius': '2%',
                'hoverAnimation': false,
                cursor: 'default',
                tooltip: {
                  show: false
                },
                'labelLine': {
                  'normal': {
                    'show': false
                  }
                },
                itemStyle: {
                  color: '#31F3FF'
                },
                animation: false,
                'data': [1]
              }
            ]
          }
          mdcEquiMoniGauge3.setOption(mdcEquiMoniGaugeOption3)
        }
        if (_this.rapidfeed) {
          let mdcEquiMoniGauge4 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge4'), 'macarons')
          let mdcEquiMoniGaugeOption4 = {
            tooltip: {
              formatter: '{a} <br/>{b} : {c}%'
            },

            series: [{
              name: '外部线',
              type: 'gauge',
              radius: '65%', // 动态
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  color: [
                    [1, '#31F3FF'] // 动态
                  ],
                  width: 1
                }
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              detail: {
                show: false
              },
              title: { //标题
                show: false
              }
            },
              {
                name: '外部刻度',
                type: 'gauge',
                radius: '80%',
                min: 0, //最小刻度
                max: 300, //最大刻度
                splitNumber: 10, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: [
                      [1, 'rgba(0,0,0,0)']
                    ]
                  }
                }, //仪表盘轴线
                axisLabel: {
                  show: true,
                  color: '#31F3FF',
                  fontSize: 10, // 动态
                  distance: -20 // 动态

                }, //刻度标签。
                axisTick: {
                  show: false
                }, //刻度样式
                splitLine: {
                  show: false
                }
              },
              {
                name: '内部宽线条',
                type: 'gauge',
                radius: '55%',
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [1, '#122B3C']
                    ],
                    width: 4
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '内部细线条',
                type: 'gauge',
                radius: '40%',
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [1, '#122B3C']
                    ],
                    width: 3
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '间隔条形',
                type: 'gauge',
                radius: '52.5%',
                z: 4,
                splitNumber: 35,
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    opacity: 0
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false,
                  length: 20,
                  splitNumber: 1,
                  lineStyle: {
                    color: '#122B3C',
                    width: 1
                  }
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: false
                },
                title: {
                  show: false
                }
              },
              {
                name: '数据',
                type: 'gauge',
                radius: '52.5%',
                z: 3,
                startAngle: 225,
                max: 300,
                endAngle: -45,
                axisLine: {
                  lineStyle: {
                    color: [
                      [_this.rapidfeed / 300, '#31F3FF'], // 动态
                      [1, '#185363']
                    ],
                    width: 4
                  }
                },
                tooltip: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                detail: {
                  show: true,
                  fontWeight: 'bold',
                  fontSize: 12,
                  color: '#fff'
                },
                pointer: {
                  show: true,
                  width: 3,
                  itemStyle:{
                    color:'#fff'
                  }
                },
                data: [{
                  name: '',
                  value: _this.rapidfeed
                }]
              },
              // 内圆
              {
                'name': '内圆环',
                'type': 'pie',
                'radius': ['4%', '2%'],
                'hoverAnimation': false,
                tooltip: {
                  show: false
                },
                cursor: 'default',
                'labelLine': {
                  'normal': {
                    'show': false
                  }
                },
                itemStyle: {
                  color: '#fff'
                },
                animation: false,
                'data': [1]
              },
              // 内圆
              {
                'name': '内圆环2',
                'type': 'pie',
                'radius': '2%',
                'hoverAnimation': false,
                cursor: 'default',
                tooltip: {
                  show: false
                },
                'labelLine': {
                  'normal': {
                    'show': false
                  }
                },
                itemStyle: {
                  color: '#31F3FF'
                },
                animation: false,
                'data': [1]
              }
            ]
          }
          mdcEquiMoniGauge4.setOption(mdcEquiMoniGaugeOption4)
        }
export default {
  name: 'EqumentDetaiModal',
  components: { Template1 },
  props: {},
  data() {
    return {
      mdcDriveTypeParamConfigList: [],
      xyzAliasesList: [],
      title: '',
      //主轴倍率
      spindlebeilv: 1,
      //进给倍率
      feedbeilv: 1,
      // 主轴负荷
      spindleload: 1,
      //快速进给倍率
      rapidfeed: 1,
      visible: false,
      resultData: {},
      driverType: '',
      deviceTypeDict: '',
      url: {
        mdcEquipmentDetailedInfo: '/mdc/mdcEquipment/mdcEquipmentDetailedInfo'
      },

      handleCancel() {
        this.$emit('close')
        this.visible = false
        // this.modalNode.removeEventListener('mouseleave', this.closeModal)
        if(this.modalTimer){
          clearInterval(this.modalTimer)
          this.modalTimer = null
        }
        if (this.timeout) {
          clearTimeout(this.timeout)
          this.timeout = null
        }
      },

      timerModel(id) {
        this.ee = id
        this.modalTimer = setInterval(() => {
          setTimeout(this.initData(this.ee), 0)
        }, 1000 * 4)
      },

      initData(id) {
        let _this = this
        this.visible = true
        // _this.drawLine()
        getAction(this.url.mdcEquipmentDetailedInfo, { id: id }).then((res) => {
          if (res.success) {
            _this.resultData = res.result
            _this.driverType = res.result.deviceType
            _this.spindlebeilv = res.result.spindlebeilv
            _this.feedbeilv = res.result.feedbeilv
            _this.spindleload = res.result.spindleload
            _this.rapidfeed = res.result.rapidfeed
            _this.mdcDriveTypeParamConfigList = res.result.mdcDriveTypeParamConfigList
            _this.xyzAliasesList = res.result.xyzAliasesList
            this.$nextTick(() => {
              _this.drawLine()
            })
            // _this.initDeviceType(_this.resultData.deviceType)
          } else {
            // _this.$message.warn(res.message)
            _this.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        })
      },

      getModalNode() {
        // console.log(document.querySelector('.ant-modal-content'))
        // this.modalNode = document.querySelector('.ant-modal-content')
        // this.timeout = setTimeout(() => {
        //   this.modalNode.addEventListener('mouseleave', this.closeModal)
        // }, 100)
      },

      closeModal() {
        this.handleCancel()
      },

      mouseEnterItem(e){
        if (e.target.clientWidth >= e.target.scrollWidth)  e.target.style.pointerEvents = 'none' // 阻止鼠标事件    pointer-events 属性用于设置元素是否对鼠标事件做出反应。
      }
    },
    beforeDestroy() {
      clearInterval(this.modalTimer)
      this.modalTimer = null
      modalTimer: null,
      ee: ' ',
      modalNode: null,
      timeout: null
    }
  },
  mounted() {

  },
  watch: {},
  filters: {
    formatDescriptionsItem(value) {
      return value ? value : '无'
    }
  },
  methods: {
    drawLine() {
      let _this = this

      let mdcEquiMoniGauge1 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge1'), 'macarons')
      let mdcEquiMoniGaugeOption1 = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },

        series: [{
          name: '外部线',
          type: 'gauge',
          radius: '65%', // 动态
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            lineStyle: {
              color: [
                [1, '#31F3FF'] // 动态
              ],
              width: 1
            }
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          detail: {
            show: false
          },
          title: { //标题
            show: false
          }
        },
          {
            name: '外部刻度',
            type: 'gauge',
            radius: '80%',
            min: 0, //最小刻度
            max: 300, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: false,
              lineStyle: {
                color: [
                  [1, 'rgba(0,0,0,0)']
                ]
              }
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: '#31F3FF',
              fontSize: 10, // 动态
              distance: -20 // 动态

            }, //刻度标签。
            axisTick: {
              show: false
            }, //刻度样式
            splitLine: {
              show: false
            }
          },
          {
            name: '内部宽线条',
            type: 'gauge',
            radius: '55%',
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              lineStyle: {
                color: [
                  [1, '#122B3C']
                ],
                width: 4
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: {
              show: false
            },
            title: {
              show: false
            }
          },
          {
            name: '内部细线条',
            type: 'gauge',
            radius: '40%',
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              lineStyle: {
                color: [
                  [1, '#122B3C']
                ],
                width: 3
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: {
              show: false
            },
            title: {
              show: false
            }
          },
          {
            name: '间隔条形',
            type: 'gauge',
            radius: '52.5%',
            z: 4,
            splitNumber: 35,
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false,
              length: 20,
              splitNumber: 1,
              lineStyle: {
                color: '#122B3C',
                width: 1
              }
            },
            splitLine: {
              show: false
            },
            detail: {
              show: false
            },
            title: {
              show: false
            }
          },
          {
            name: '数据',
            type: 'gauge',
            radius: '52.5%',
            z: 3,
            startAngle: 225,
            max: 300,
            endAngle: -45,
            axisLine: {
              lineStyle: {
                color: [
                  [_this.spindlebeilv / 300, '#31F3FF'], // 动态
                  [1, '#185363']
                ],
                width: 4
              }
            },
            tooltip: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: {
              show: _this.spindlebeilv ? true : false,
              fontWeight: 'bold',
              fontSize: 12,
              color: '#fff'
            },
            pointer: {
              show: _this.spindlebeilv ? true : false,
              width: 3,
              itemStyle: {
                color: '#fff'
              }
            },
            data: [{
              name: '',
              value: _this.spindlebeilv
            }]
          },
          // 内圆
          {
            'name': '内圆环',
            'type': 'pie',
            'radius': ['4%', '2%'],
            'hoverAnimation': false,
            tooltip: {
              show: false
            },
            cursor: 'default',
            'labelLine': {
              'normal': {
                'show': false
              }
            },
            itemStyle: {
              color: '#fff'
            },
            animation: false,
            'data': [1]
          },
          // 内圆
          {
            'name': '内圆环2',
            'type': 'pie',
            'radius': '2%',
            'hoverAnimation': false,
            cursor: 'default',
            tooltip: {
              show: false
            },
            'labelLine': {
              'normal': {
                'show': false
              }
            },
            itemStyle: {
              color: '#31F3FF'
            },
            animation: false,
            'data': [1]
          }
        ]
      }
      mdcEquiMoniGauge1.setOption(mdcEquiMoniGaugeOption1)

      let mdcEquiMoniGauge2 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge2'), 'macarons')
      let mdcEquiMoniGaugeOption2 = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },

        series: [{
          name: '外部线',
          type: 'gauge',
          radius: '65%', // 动态
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            lineStyle: {
              color: [
                [1, '#31F3FF'] // 动态
              ],
              width: 1
            }
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          detail: {
            show: false
          },
          title: { //标题
            show: false
          }
        },
          {
            name: '外部刻度',
            type: 'gauge',
            radius: '80%',
            min: 0, //最小刻度
            max: 300, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: false,
              lineStyle: {
                color: [
                  [1, 'rgba(0,0,0,0)']
                ]
              }
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: '#31F3FF',
              fontSize: 10, // 动态
              distance: -20 // 动态

            }, //刻度标签。
            axisTick: {
              show: false
            }, //刻度样式
            splitLine: {
              show: false
            }
          },
          {
            name: '内部宽线条',
            type: 'gauge',
            radius: '55%',
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              lineStyle: {
                color: [
                  [1, '#122B3C']
                ],
                width: 4
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: {
              show: false
            },
            title: {
              show: false
            }
          },
          {
            name: '内部细线条',
            type: 'gauge',
            radius: '40%',
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              lineStyle: {
                color: [
                  [1, '#122B3C']
                ],
                width: 3
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: {
              show: false
            },
            title: {
              show: false
            }
          },
          {
            name: '间隔条形',
            type: 'gauge',
            radius: '52.5%',
            z: 4,
            splitNumber: 35,
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false,
              length: 20,
              splitNumber: 1,
              lineStyle: {
                color: '#122B3C',
                width: 1
              }
            },
            splitLine: {
              show: false
            },
            detail: {
              show: false
            },
            title: {
              show: false
            }
          },
          {
            name: '数据',
            type: 'gauge',
            radius: '52.5%',
            z: 3,
            startAngle: 225,
            max: 300,
            endAngle: -45,
            axisLine: {
              lineStyle: {
                color: [
                  [_this.feedbeilv / 300, '#31F3FF'], // 动态
                  [1, '#185363']
                ],
                width: 4
              }
            },
            tooltip: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: {
              show: _this.feedbeilv ? true : false,
              fontWeight: 'bold',
              fontSize: 12,
              color: '#fff'
            },
            pointer: {
              show: _this.feedbeilv ? true : false,
              width: 3,
              itemStyle: {
                color: '#fff'
              }
            },
            data: [{
              name: '',
              value: _this.feedbeilv
            }]
          },
          // 内圆
          {
            'name': '内圆环',
            'type': 'pie',
            'radius': ['4%', '2%'],
            'hoverAnimation': false,
            tooltip: {
              show: false
            },
            cursor: 'default',
            'labelLine': {
              'normal': {
                'show': false
              }
            },
            itemStyle: {
              color: '#fff'
            },
            animation: false,
            'data': [1]
          },
          // 内圆
          {
            'name': '内圆环2',
            'type': 'pie',
            'radius': '2%',
            'hoverAnimation': false,
            cursor: 'default',
            tooltip: {
              show: false
            },
            'labelLine': {
              'normal': {
                'show': false
              }
            },
            itemStyle: {
              color: '#31F3FF'
            },
            animation: false,
            'data': [1]
          }
        ]
      }
      mdcEquiMoniGauge2.setOption(mdcEquiMoniGaugeOption2)

      if (_this.resultData !== 'HNC7' || _this.resultData == 'HNC8' || _this.resultData == 'LSV2') {
        let mdcEquiMoniGauge3 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge3'), 'macarons')
        let mdcEquiMoniGaugeOption3 = {
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },

          series: [{
            name: '外部线',
            type: 'gauge',
            radius: '65%', // 动态
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              lineStyle: {
                color: [
                  [1, '#31F3FF'] // 动态
                ],
                width: 1
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: {
              show: false
            },
            title: { //标题
              show: false
            }
          },
            {
              name: '外部刻度',
              type: 'gauge',
              radius: '80%',
              min: 0, //最小刻度
              max: 100, //最大刻度
              splitNumber: 10, //刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: false,
                lineStyle: {
                  color: [
                    [1, 'rgba(0,0,0,0)']
                  ]
                }
              }, //仪表盘轴线
              axisLabel: {
                show: true,
                color: '#31F3FF',
                fontSize: 10, // 动态
                distance: -20 // 动态

              }, //刻度标签。
              axisTick: {
                show: false
              }, //刻度样式
              splitLine: {
                show: false
              }
            },
            {
              name: '内部宽线条',
              type: 'gauge',
              radius: '55%',
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  color: [
                    [1, '#122B3C']
                  ],
                  width: 4
                }
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              detail: {
                show: false
              },
              title: {
                show: false
              }
            },
            {
              name: '内部细线条',
              type: 'gauge',
              radius: '40%',
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  color: [
                    [1, '#122B3C']
                  ],
                  width: 3
                }
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              detail: {
                show: false
              },
              title: {
                show: false
              }
            },
            {
              name: '间隔条形',
              type: 'gauge',
              radius: '52.5%',
              z: 4,
              splitNumber: 35,
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  opacity: 0
                }
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false,
                length: 20,
                splitNumber: 1,
                lineStyle: {
                  color: '#122B3C',
                  width: 1
                }
              },
              splitLine: {
                show: false
              },
              detail: {
                show: false
              },
              title: {
                show: false
              }
            },
            {
              name: '数据',
              type: 'gauge',
              radius: '52.5%',
              z: 3,
              startAngle: 225,
              max: 100,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  color: [
                    [_this.spindleload / 100, '#31F3FF'], // 动态
                    [1, '#185363']
                  ],
                  width: 4
                }
              },
              tooltip: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              detail: {
                show: _this.spindleload ? true : false,
                fontWeight: 'bold',
                fontSize: 12,
                color: '#fff'
              },
              pointer: {
                show: _this.spindleload ? true : false,
                width: 3,
                itemStyle: {
                  color: '#fff'
                }
              },
              data: [{
                name: '',
                value: _this.spindleload
              }]
            },
            // 内圆
            {
              'name': '内圆环',
              'type': 'pie',
              'radius': ['4%', '2%'],
              'hoverAnimation': false,
              tooltip: {
                show: false
              },
              cursor: 'default',
              'labelLine': {
                'normal': {
                  'show': false
                }
              },
              itemStyle: {
                color: '#fff'
              },
              animation: false,
              'data': [1]
            },
            // 内圆
            {
              'name': '内圆环2',
              'type': 'pie',
              'radius': '2%',
              'hoverAnimation': false,
              cursor: 'default',
              tooltip: {
                show: false
              },
              'labelLine': {
                'normal': {
                  'show': false
                }
              },
              itemStyle: {
                color: '#31F3FF'
              },
              animation: false,
              'data': [1]
            }
          ]
        }
        mdcEquiMoniGauge3.setOption(mdcEquiMoniGaugeOption3)
      } else {
        let mdcEquiMoniGauge4 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge4'), 'macarons')
        let mdcEquiMoniGaugeOption4 = {
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },

          series: [{
            name: '外部线',
            type: 'gauge',
            radius: '65%', // 动态
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              lineStyle: {
                color: [
                  [1, '#31F3FF'] // 动态
                ],
                width: 1
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: {
              show: false
            },
            title: { //标题
              show: false
            }
          },
            {
              name: '外部刻度',
              type: 'gauge',
              radius: '80%',
              min: 0, //最小刻度
              max: 300, //最大刻度
              splitNumber: 10, //刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: false,
                lineStyle: {
                  color: [
                    [1, 'rgba(0,0,0,0)']
                  ]
                }
              }, //仪表盘轴线
              axisLabel: {
                show: true,
                color: '#31F3FF',
                fontSize: 10, // 动态
                distance: -20 // 动态

              }, //刻度标签。
              axisTick: {
                show: false
              }, //刻度样式
              splitLine: {
                show: false
              }
            },
            {
              name: '内部宽线条',
              type: 'gauge',
              radius: '55%',
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  color: [
                    [1, '#122B3C']
                  ],
                  width: 4
                }
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              detail: {
                show: false
              },
              title: {
                show: false
              }
            },
            {
              name: '内部细线条',
              type: 'gauge',
              radius: '40%',
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  color: [
                    [1, '#122B3C']
                  ],
                  width: 3
                }
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              detail: {
                show: false
              },
              title: {
                show: false
              }
            },
            {
              name: '间隔条形',
              type: 'gauge',
              radius: '52.5%',
              z: 4,
              splitNumber: 35,
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  opacity: 0
                }
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false,
                length: 20,
                splitNumber: 1,
                lineStyle: {
                  color: '#122B3C',
                  width: 1
                }
              },
              splitLine: {
                show: false
              },
              detail: {
                show: false
              },
              title: {
                show: false
              }
            },
            {
              name: '数据',
              type: 'gauge',
              radius: '52.5%',
              z: 3,
              startAngle: 225,
              max: 300,
              endAngle: -45,
              axisLine: {
                lineStyle: {
                  color: [
                    [_this.rapidfeed / 300, '#31F3FF'], // 动态
                    [1, '#185363']
                  ],
                  width: 4
                }
              },
              tooltip: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              detail: {
                show: _this.rapidfeed ? true : false,
                fontWeight: 'bold',
                fontSize: 12,
                color: '#fff'
              },
              pointer: {
                show: _this.rapidfeed ? true : false,
                width: 3,
                itemStyle: {
                  color: '#fff'
                }
              },
              data: [{
                name: '',
                value: _this.rapidfeed
              }]
            },
            // 内圆
            {
              'name': '内圆环',
              'type': 'pie',
              'radius': ['4%', '2%'],
              'hoverAnimation': false,
              tooltip: {
                show: false
              },
              cursor: 'default',
              'labelLine': {
                'normal': {
                  'show': false
                }
              },
              itemStyle: {
                color: '#fff'
              },
              animation: false,
              'data': [1]
            },
            // 内圆
            {
              'name': '内圆环2',
              'type': 'pie',
              'radius': '2%',
              'hoverAnimation': false,
              cursor: 'default',
              tooltip: {
                show: false
              },
              'labelLine': {
                'normal': {
                  'show': false
                }
              },
              itemStyle: {
                color: '#31F3FF'
              },
              animation: false,
              'data': [1]
            }
          ]
        }
        mdcEquiMoniGauge4.setOption(mdcEquiMoniGaugeOption4)
      }
    },

    handleCancel() {
      this.$emit('close')
      this.visible = false
      // this.modalNode.removeEventListener('mouseleave', this.closeModal)
      if (this.modalTimer) {
        clearInterval(this.modalTimer)
        this.modalTimer = null
      }
      if (this.timeout) {
        clearTimeout(this.timeout)
        this.timeout = null
      }
    },

    timerModel(id) {
      this.ee = id
      this.modalTimer = setInterval(() => {
        setTimeout(this.initData(this.ee), 0)
      }, 1000 * 4)
    },

    initData(id) {
      let _this = this
      this.visible = true
      // _this.drawLine()
      getAction(this.url.mdcEquipmentDetailedInfo, { id: id }).then((res) => {
        if (res.success) {
          _this.resultData = res.result
          _this.driverType = res.result.deviceType
          _this.spindlebeilv = res.result.spindlebeilv
          _this.feedbeilv = res.result.feedbeilv
          _this.spindleload = res.result.spindleload
          _this.rapidfeed = res.result.rapidfeed
          _this.mdcDriveTypeParamConfigList = res.result.mdcDriveTypeParamConfigList
          _this.xyzAliasesList = res.result.xyzAliasesList
          this.$nextTick(() => {
            _this.drawLine()
          })
          // _this.initDeviceType(_this.resultData.deviceType)
        } else {
          // _this.$message.warn(res.message)
          _this.$notification.warning({
            message: '消息',
            description: res.message
          })
        }
      })
    },

    getModalNode() {
      // console.log(document.querySelector('.ant-modal-content'))
      // this.modalNode = document.querySelector('.ant-modal-content')
      // this.timeout = setTimeout(() => {
      //   this.modalNode.addEventListener('mouseleave', this.closeModal)
      // }, 100)
    },

    closeModal() {
      this.handleCancel()
    },

    mouseEnterItem(e) {
      if (e.target.clientWidth >= e.target.scrollWidth) e.target.style.pointerEvents = 'none' // 阻止鼠标事件    pointer-events 属性用于设置元素是否对鼠标事件做出反应。
    }
  },
  beforeDestroy() {
    clearInterval(this.modalTimer)
    this.modalTimer = null
  }
}
</script>

<style scoped lang="less">
  body {
    overflow-y: hidden !important;
  }
body {
  overflow-y: hidden !important;
}

  .full-modal {
    .ant-modal {
      top: 0;
      padding-bottom: 0;
      margin: 0;
      background-color: #4a4a48 !important;
      opacity: 0.9;
    }
    /deep/ .ant-modal-content {
      display: flex;
      flex-direction: column;
      /*height: calc(100vh);*/
      background-color: #4a4a48;
    }
    .ant-modal-body {
      flex: 1;
    }
.full-modal {
  .ant-modal {
    top: 0;
    padding-bottom: 0;
    margin: 0;
    background-color: #4a4a48 !important;
    opacity: 0.9;
  }

  /deep/ .ant-modal-content {
    /*background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);*/
    /*background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));*/
    /*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    background-color: #312c2c;
    opacity: 1;
    display: flex;
    flex-direction: column;
    /*height: calc(100vh);*/
    background-color: #4a4a48;
  }

  /deep/ .ant-modal-close {
    color: #1191b0;
    font-size: 24px;
  .ant-modal-body {
    flex: 1;
  }
}

  /deep/ .ant-modal-close-x {
    font-size: 24px;
  }
/deep/ .ant-modal-content {
  /*background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);*/
  /*background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));*/
  /*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
  /*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
  /*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
  /*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
  background-color: #312c2c;
  opacity: 1;
}

  /deep/ .ant-modal-footer {
    border-top: none;
  }
/deep/ .ant-modal-close {
  color: #1191b0;
  font-size: 24px;
}

  /deep/ .ant-descriptions {
    border: 1px solid #16738d;
    margin: 10px 0;
  }
/deep/ .ant-modal-close-x {
  font-size: 24px;
}

  /deep/ .ant-descriptions-title {
    color: #fff;
    padding: 10px;
    margin-bottom: 0;
  }
/deep/ .ant-modal-footer {
  border-top: none;
}

  /*/deep/ .ant-descriptions-view {*/
    /*padding: 0 20px;*/
  /*}*/
/deep/ .ant-descriptions {
  border: 1px solid #16738d;
  margin: 10px 0;
}

  /deep/ .ant-descriptions-view .ant-descriptions-row .ant-descriptions-item {
    padding-bottom: 5px;
  }
/deep/ .ant-descriptions-title {
  color: #fff;
  padding: 10px;
  margin-bottom: 0;
}

  /deep/ .ant-descriptions-item-colon {
    color: #fff;
    /*width: 5.1vw;*/
  }
/*/deep/ .ant-descriptions-view {*/
/*padding: 0 20px;*/
/*}*/

  /deep/ .ant-descriptions-item-content {
    color: #fff;
    border: 1px solid #4bcfc8;
    padding: 0 10px;
    min-width: 130px;
  }
/deep/ .ant-descriptions-view .ant-descriptions-row .ant-descriptions-item {
  padding-bottom: 5px;
}

  .mdcEquipMon {
    color: #fff;
  }
/deep/ .ant-descriptions-item-colon {
  color: #fff;
  /*width: 5.1vw;*/
}

  /deep/ .ant-descriptions-item-label{
    width: 6.7vw;
    text-align: right;
    margin-right: 10px;
  }
/deep/ .ant-descriptions-item-content {
  color: #fff;
  border: 1px solid #4bcfc8;
  padding: 0 10px;
  min-width: 130px;
}

  /deep/ .operationData .ant-descriptions-item-content,
  .lsv2Data .ant-descriptions-item-content
  {
    width: 130px;
    vertical-align: bottom;
  }
.mdcEquipMon {
  color: #fff;
}

  .description-item-class{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
/deep/ .ant-descriptions-item-label {
  width: 6.7vw;
  text-align: right;
  margin-right: 10px;
}

/deep/ .operationData .ant-descriptions-item-content,
.lsv2Data .ant-descriptions-item-content {
  width: 130px;
  vertical-align: bottom;
}

.description-item-class {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>