分控车间看板新增点击设备图片弹出设备信息弹窗

zhaowei

2024-10-31 7fe18e1be6ef108277fa628db35c63c74d77b75e

分控车间看板新增点击设备图片弹出设备信息弹窗

 src/views/mdc/base/SubControlWorkshopSignage.vue

@@ -80,7 +80,8 @@

    <div class="device-container">
      <div class="single-device-container" v-for="item in equipmentStatusList" :key="item.id"
           :style="{marginRight:isDeviceContinuous(currentProductionInfo.productionOrder)?'':'5%'}">
           :style="{marginRight:isDeviceContinuous(currentProductionInfo.productionOrder)?'':'5%'}"
           @click="openDetail(item)">
        <div class="status-image-container">
          <img src="@/assets/page/subControlWorkshopSignage/grey.png" v-if="item.oporation===0">
          <img src="@/assets/page/subControlWorkshopSignage/green.png" v-if="item.oporation===3">
@@ -90,7 +91,7 @@
        <div class="device-image-container">
          <img :src="require('@/assets/page/subControlWorkshopSignage/'+item.equipmentId+'.png')">
        </div>
        1
        {{item.equipmentId}}
        <div class="device-name">
          {{item.equipmentName}}
        </div>
@@ -146,6 +147,8 @@

    <SignageModal :todayProductionPlanList="todayProductionPlanList" :modalVisible="modalVisible"
                  @closeModal="modalVisible=false"/>

    <EquipmentDetailModal ref="equipmentDetailModal"/>
  </div>
</template>

@@ -153,10 +156,11 @@
  import moment from 'moment'
  import api from '@/api/mdc'
  import SignageModal from './modules/SubControlWorkshopSignage/SignageModal'
  import EquipmentDetailModal from './modules/SubControlWorkshopSignage/EquipmentDetailModal'

  export default {
    name: 'SubControlWorkshopSignage',
    components: { SignageModal },
    components: { EquipmentDetailModal, SignageModal },
    data() {
      return {
        currentProductionInfo: {
@@ -204,22 +208,22 @@
        // ],
        todayProductionPlanList: [],
        equipmentStatusList: [
          {
            oporation: 0,
            equipmentId: '5045-7076'
          },
          {
            oporation: 3,
            equipmentId: '5068-7005'
          },
          {
            oporation: 22,
            equipmentId: '5045-7157'
          },
          {
            oporation: 2,
            equipmentId: '5045-7815'
          }
          // {
          //   oporation: 0,
          //   equipmentId: '5045-7076'
          // },
          // {
          //   oporation: 3,
          //   equipmentId: '5068-7005'
          // },
          // {
          //   oporation: 22,
          //   equipmentId: '5045-7157'
          // },
          // {
          //   oporation: 2,
          //   equipmentId: '5045-7815'
          // }
        ],
        // toolLife: {
        //   brandList: ['北齐二', '铱 é•', '森 äº”', '东 æ›¼', '西 æ›¼', '西 å¾·', '东 å¾·'],
@@ -412,8 +416,18 @@
          })
      },

      clickToLoadMore() {

      openDetail(item) {
        if (item.oporation == 0) {
          this.$notification.warning({
            message: '消息',
            description: '设备处于关机状态！'
          })
          return false
        }
        console.log(item)
        this.$refs.equipmentDetailModal.initData(item.equipmentId)
        this.$refs.equipmentDetailModal.timerModel(item.equipmentId)
      },

      getEquipmentStatusByApi() {
@@ -552,6 +566,7 @@
        align-items: center;
        padding-top: 2%;
        font-size: 1vw;
        cursor: pointer;

        .status-image-container {
          height: 20%;

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1361 @@
<template>
  <div ref="wrap">
    <a-modal
      title=""
      width="65%"
      :visible="visible"
      :getContainer="() => this.$refs.wrap"
      @cancel="handleCancel"
      cancelText="关闭"
      wrap-class-name="full-modal"
      centered
    >
      <div id="mdcEquiInfo">
        <div class="equipment-info">
          <div>设备名称：{{resultData.equipmentName}}</div>
          <div>最大轴数：{{resultData.maxAxis}}</div>
          <div>有效轴数：{{resultData.validAxis}}</div>
          <div>设备型号：{{resultData.equipmentModel|isValueNull}}</div>
          <div>设备IP：{{resultData.equipmentIp|isValueNull}}</div>
        </div>
        <div class="charts-container">
          <div class="mdcEquipMon" v-if="this.spindlebeilv != null">
            <div id="mdcEquiMoniGauge1" ref="chart1"></div>
            ä¸»è½´å€çŽ‡
          </div>
          <div class="mdcEquipMon" v-if="this.feedbeilv != null">
            <div id="mdcEquiMoniGauge2" ref="chart2"></div>
            è¿›ç»™å€çŽ‡
          </div>
          <div class="mdcEquipMon" v-if="this.spindleload != null">
            <div id="mdcEquiMoniGauge3" ref="mdcEquiMoniGauge3"></div>
            ä¸»è½´è´Ÿè·
          </div>
          <!--<div class="mdcEquipMon" v-if="this.rapidfeed != null">-->
          <!--<div id="mdcEquiMoniGauge4" ref="mdcEquiMoniGauge4"></div>-->
          <!--快速进给倍率-->
          <!--</div>-->
        </div>
        <div class="speed-container">
          <div>主轴转速：{{resultData.spindlespeed}}(mm/min)</div>
          <div>进给速度：{{resultData.feedrate}}(mm/rev)</div>
        </div>
        <div class="other-info">
          <div class="process-info">
            <div class="info-title">加工信息</div>
            <div class="info-value-container">
              <div>运行模式：{{resultData.runModble|isValueNull}}</div>
              <div>加工状态：{{resultData.workstate|isValueNull}}</div>
              <div>急停状态：{{resultData.emergency|isValueNull}}</div>
              <div>数控系统型号：{{resultData.controlsystem|isValueNull}}</div>
              <div>刀具号：{{resultData.toolNum|isValueNull}}</div>
            </div>
          </div>

          <div class="program-info">
            <div class="info-title">程序信息</div>
            <div class="info-value-container">
              <div>执行代码：{{resultData.executingcode|isValueNull}}</div>
              <div>程序号：{{resultData.sequencenumber|isValueNull}}</div>
              <div>子程序号：{{resultData.productName|isValueNull}}</div>
            </div>
          </div>

          <div class="axis-info">
            <div class="info-title">轴信息</div>
            <div class="info-value-container">
              <table>
                <tr>
                  <td>è½´</td>
                  <td>绝对坐标</td>
                  <td>机床坐标</td>
                  <td>相对坐标</td>
                  <td>轴温度</td>
                  <td>伺服跟随误差</td>
                </tr>
                <tr v-for="(item,index) in xyzAliasesList" :key="index">
                  <td>&nbsp;&nbsp;{{item.axisType}}&nbsp;&nbsp;</td>
                  <td>{{item.absolute}}</td>
                  <td>{{item.machine}}</td>
                  <td>{{item.relative}}</td>
                  <td>{{item.temperature}}</td>
                  <td>{{item.lag}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <template slot="footer">
        <a-button
          :style="{ marginRight: '8px' }"
          @click="handleCancel"
          style="color: #1191b0;"
        >关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
  import {
    getAction,
    postAction
  } from '@/api/manage'

  export default {
    name: 'EquipmentDetailModal',
    components: {},
    props: {},
    data() {
      return {
        xyzAliasesList: [],
        //主轴倍率
        spindlebeilv: 1,
        //进给倍率
        feedbeilv: 1,
        // ä¸»è½´è´Ÿè·
        spindleload: 1,
        //快速进给倍率
        rapidfeed: 1,
        visible: false,
        resultData: {},
        driverType: '',
        deviceTypeDict: '',
        url: {
          mdcEquipmentDetailedInfo: '/mdc/subLargeScreen/equipmentInfo'
        },
        modalTimer: null
      }
    },
    mounted() {
    },
    filters: {
      isValueNull(value) {
        return value ? value : '无'
      }
    },
    methods: {
      drawLine() {
        let _this = this
        if (_this.spindlebeilv) {
          //基于准备好的dom，初始化echarts实例
          let mdcEquiMoniGauge1 = this.$echarts.init(document.getElementById('mdcEquiMoniGauge1'), 'macarons')
          console.log('spindlebeilv', _this.spindlebeilv)
          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)
        // }
      },

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

      },

      handleCancel() {
        this.$emit('close')
        this.visible = false
        clearInterval(this.modalTimer)
        this.modalTimer = null
      },

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

      mouseEnterItem(e) {
        console.log(e, e.target, e.target.clientWidth, e.target.scrollWidth)
        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;
  }

  #mdcEquiInfo {
    color: #fff;
    font-size: 18px;
    .equipment-info {
      display: flex;
      justify-content: space-between;
      padding: 0 50px;
    }

    .charts-container {
      display: flex;
      margin: 20px 0;
      .mdcEquipMon {
        width: 250px;
        height: 200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;

        & > div {
          width: 100%;
          flex: 1;
        }
      }
    }

    .speed-container {
      display: flex;
      justify-content: space-evenly;
      margin: 25px 0;
    }

    .other-info {
      height: 300px;
      display: flex;
      justify-content: space-between;
      & > div {
        border: 2px solid #EFEFAB;
        border-radius: 12px;
        padding: 25px;
        display: flex;
        flex-direction: column;

        .info-title {
          color: #EFEFAB;
          text-align: center;
          font-size: 25px;
          border-bottom: 1px solid #EFEFAB;
          padding-bottom: 10px;
        }

        .info-value-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          padding: 10px 0 0 20px;

          .overflow-container {
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          table {
            td {
              text-align: center;
            }
          }
        }
      }
    }

    .process-info {
      flex: 0.22;
    }

    .program-info {
      flex: 0.3;
    }

    .axis-info {
      flex: 0.45;
    }
  }

  /deep/ .ant-modal-body {
    padding-bottom: 0;
  }

  /deep/ .ant-modal-content {
    background-color: #312c2c;
    opacity: 0.9;
  }

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

  /deep/ .ant-modal-close-x {
    font-size: 24px;
  }

  /deep/ .ant-modal-footer {
    border-top: none;
  }

  .ant-btn {
    padding: 0 10px;
    margin-left: 3px;
    color: #fff !important;
    background-color: #1191b0;
    border: none;
  }

  .ant-form-item-control {
    line-height: 0px;
  }

  /** ä¸»è¡¨å•è¡Œé—´è· */
  .ant-form .ant-form-item {
    margin-bottom: 10px;
  }

  /** Tab页面行间距 */
  .ant-tabs-content .ant-form-item {
    margin-bottom: 0px;
  }
</style>