1、新增MDC车间看板入口以及看板页面 2、新增大屏插件dataV和拖拽插件vue-drag-resize

zhaowei

2024-08-05 cdbd05d5bd48ac1716b6be6361a41e46eaa338e6

1、新增MDC车间看板入口以及看板页面
2、新增大屏插件dataV和拖拽插件vue-drag-resize

 package.json

@@ -12,6 +12,7 @@
  "dependencies": {
    "@antv/data-set": "^0.11.4",
    "@jeecg/antd-online-mini": "3.4.3-beta2",
    "@jiaminghi/data-view": "^2.10.0",
    "@tinymce/tinymce-vue": "2.1.0",
    "@toast-ui/editor": "^2.1.2",
    "ant-design-vue": "^1.7.2",
@@ -37,6 +38,7 @@
    "vue-area-linkage": "^5.1.0",
    "vue-calendar-component": "^2.8.2",
    "vue-cropper": "^0.5.4",
    "vue-drag-resize": "^1.5.4",
    "vue-i18n": "^8.7.0",
    "vue-loader": "^15.7.0",
    "vue-ls": "^3.2.0",
@@ -58,13 +60,13 @@
    "@vue/cli-service": "^3.3.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "7.2.3",
    "compression-webpack-plugin": "^3.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.1.0",
    "html-webpack-plugin": "^4.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.6.10",
    "html-webpack-plugin": "^4.2.0",
    "compression-webpack-plugin": "^3.1.0"
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,

 src/assets/Bj.jpg

 src/config/router.config.js

@@ -80,6 +80,10 @@
    ]
  },
  {
    path: '/MdcWorkshopSignage/:id',
    component: () => import('@/views/mdc/base/MdcWorkshopSignage.vue')
  },
  {
    path: '/404',
    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
  },

 src/main.js

@@ -51,6 +51,13 @@
import { rules } from '@/utils/rules'
import * as echarts from 'echarts'

// å°†è‡ªåŠ¨æ³¨å†Œæ‰€æœ‰ç»„件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

import VueDragResize from "vue-drag-resize"
Vue.component('vue-drag-resize', VueDragResize)

Vue.prototype.$echarts = echarts
Vue.prototype.rules = rules
Vue.config.productionTip = false

 src/views/mdc/base/MdcWorkshopSignage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,566 @@
<template>
  <dv-full-screen-container class="full-screen-container">
    <div>
      <!--页头区域-->
      <header class="page-header" :style="{height: pageHeaderHeight+'px'}">
        <a-row style="height: 100%">
          <a-col :span="7" class="header-left">
            <a-space>
              <span v-if="!isSwitchChecked">开启功能</span>
              <span v-else>关闭功能</span>
              <a-switch
                checked-children="开"
                un-checked-children="关"
                @change="handleSwitchChange"
                v-model="isSwitchChecked"
                :disabled="isSwitchChecked"
              />
              <a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi">保存位置</a-button>
            </a-space>
          </a-col>

          <a-col :span="10" class="workshop-name">{{ workshopDetails.workshopName }}</a-col>

          <a-col :span="7" class="device-status-info">
            <!--<a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"-->
            <!--@click="handleScreenDevive(item)">-->
            <!--<div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>-->
            <!--<div class="status-square" :style="{ backgroundColor: item.color }"></div>-->
            <!--&lt;!&ndash;<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>&ndash;&gt;-->
            <!--<div>{{getDeviceNumberByStatus(item.value) }}</div>-->
            <!--</a-space>-->
            <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
              <div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>
              <div class="status-square" :style="{ backgroundColor: item.color }"></div>
              <!--<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>-->
              <div>{{getDeviceNumberByStatus(item.value) }}</div>
            </a-space>
          </a-col>
        </a-row>
      </header>

      <!--拖拽设备区域-->
      <div class="content-container" ref="deviceContainerRef" style="overflow: auto">
        <img :src="imgSrc" width="1920" height="900">
        <div class="guideline guidelineX" :style="{top:guidelineXTop+'px',display:showGuideline}"></div>
        <div class="guideline guidelineY" :style="{left:guidelineYLeft+'px',display:showGuideline}"></div>
        <VueDragResize
          v-for="(item, index) in deviceList"
          :key="item.equipmentId"
          :w="item.vw"
          :h="item.vh"
          :x="item.coordinateLeft"
          :y="item.coordinateTop"
          v-on:resizing="resize($event, index)"
          v-on:dragging="resize($event, index)"
          :parentLimitation="parentLimitation"
          :parentH="parentH"
          :parentW="parentW"
          :minw="70"
          :minh="70"
          :isDraggable="isDraggable"
          :isResizable="isResizable"
          :stickSize="6"
          @deactivated="showGuideline = 'none'"
        >
          <div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }"
               @click="openDetail(item)">
            <div class="device-status">
              <div
                v-if="item.equipmentStatus == 2 || item.equipmentStatus == 1"
                :style="{ backgroundImage: `url(${require('@/assets/yellow.png')})` }"
                class="status-image"
              ></div>
              <div
                v-if="item.equipmentStatus == 22"
                :style="{ backgroundImage: `url(${require('@/assets/red.png')})` }"
                class="status-image"
              ></div>
              <div
                v-if="item.equipmentStatus == 0"
                :style="{ backgroundImage: `url(${require('@/assets/gray.png')})` }"
                class="status-image"
              ></div>
              <div
                v-if="item.equipmentStatus == 3"
                :style="{ backgroundImage: `url(${require('@/assets/green.png')})` }"
                class="status-image"
              ></div>
              <div
                :style="{ backgroundImage: `url(${getImgView(item.equipmentImage)})` }"
                class="device-image"
              ></div>
            </div>
            <div class="device-id" id="deviceId"
                 :style="{ color:workshopDetails.equipmentIdColor }">
              {{ item.equipmentId }}
            </div>
          </div>
        </VueDragResize>
      </div>

      <EquipmentDetailModal ref="EquipmentDetailModal"></EquipmentDetailModal>
    </div>
  </dv-full-screen-container>
</template>

<script>
  import VueDragResize from 'vue-drag-resize'
  import api from '@/api/mdc'
  import { getFileAccessHttpUrl } from '@/api/manage'
  import EquipmentDetailModal from './modules/WorkshopSignage/EquipmentDetailModal'
  import { message } from 'ant-design-vue'

  message.config({
    maxCount: 3
  })

  export default {
    components: {
      VueDragResize,
      EquipmentDetailModal
    },
    data() {
      return {
        pageHeaderHeight: 80,// é¡µå¤´é«˜åº¦
        workshopDetails: {}, //  è½¦é—´è¯¦ç»†ä¿¡æ¯,
        isDraggable: false, // æ˜¯å¦å¼€å¯æ‹–拽
        isResizable: false, // æ˜¯å¦å¼€å¯ç¼©æ”¾
        isSwitchChecked: false, // æ˜¯å¦å¼€å¯åŠŸèƒ½
        timingAcquisition: null, // å®šæ—¶åˆ·æ–°æ˜¯å¦å¼€å¯
        parentH: 5000,//父级高度
        parentW: 1920,//父级宽度
        showGuideline: 'none',
        guidelineXTop: 0,
        guidelineYLeft: 0,
        deviceList: [
          // {
          //   equipmentId: '123213213123232',// è®¾å¤‡ID
          //   equipmentImage: require('@/assets/8.png'), // è®¾å¤‡å›¾ç‰‡
          //   coordinateTop: 200, // æ‹–拽元素距盒子顶距离
          //   coordinateLeft: 100, // æ‹–拽元素距盒子左侧距离
          //   vw: 100,  // ç¼©æ”¾å…ƒç´ å®½åº¦
          //   vh: 100, // ç¼©æ”¾å…ƒç´ é«˜åº¦
          //   equipmentStatus: 1 // è®¾å¤‡çŠ¶æ€ 0:关机 22:报警 2:待机 3:运行 å¼€æœº:1（没有四色灯标识归为待机）
          // }
        ], // è®¾å¤‡ä¿¡æ¯åˆ—表
        deviceList_copy: [],
        deviceStatusList: [
          // {
          //   label: '全部',
          //   value: 99,
          //   color: '#fff',
          //   checked: true
          // },
          {
            label: '关机',
            value: 0,
            color: '#A8A8A8',
            checked: false
          },
          {
            label: '待机',
            value: 2,
            color: '#FFFF00',
            checked: false
          },
          {
            label: '运行',
            value: 3,
            color: '#00EE00',
            checked: false
          },
          {
            label: '报警',
            value: 22,
            color: '#FF0000',
            checked: false
          }
        ],// è®¾å¤‡çŠ¶æ€æŒ‡ç¤ºç¯åˆ—表，
        windowHeight: null,// å½“前浏览器可视区域高度（（不包括工具栏、书签、底部任务栏）
        isFullScreen: false,// è¿›å…¥çœ‹æ¿é¡µé¢æ—¶æ˜¯å¦ä¸ºå…¨å±æ¨¡å¼ï¼Œä¸åŒ…括正常模式进入后切换为全屏模式
        parentLimitation: false,// æ‹–拽区域是否限制在父元素区域内,
        checkedStatusCount: null,// å·²å‹¾é€‰ç­›é€‰çŠ¶æ€ä¸ªæ•°
        imgSrc: ''// è½¦é—´å›¾çº¸åœ°å€
      }
    },
    watch: {
      isSwitchChecked: {
        handler(newVal) {
          if (!newVal) {
            console.log('定时器开启中')
            this.timingAcquisition = setInterval(() => {
              this.getDeviceListByApi(this.$route.params.id)
            }, 2000)
          } else {
            console.log('关闭定时器')
            clearInterval(this.timingAcquisition)
            this.timingAcquisition = null
          }
        },
        immediate: true
      }
    },
    methods: {
      /**
       * é€šè¿‡è½¦é—´Id调用接口获取设备信息列表
       * @param id è½¦é—´Id
       */
      getDeviceListByApi(id) {
        console.log('重新刷新')
        api.getDeviceListInWorkshopSignagePageApi(id).then((res) => {
          if (res.result && res.result.length > 0) {
            this.deviceList = res.result
            this.deviceList_copy = res.result
          }
        })
      },

      /**
       * é€šè¿‡è½¦é—´Id调用接口获取车间详细信息
       * @param id è½¦é—´Id
       */
      getWorkshopDetailsByApi(id) {
        api.getWorkshopDetailByWorkshopIdApi(id).then((res) => {
          this.workshopDetails = res.result
          // this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(
          //   this.workshopDetails.backgroundImage
          // )})`
          this.imgSrc = this.getImgView(this.workshopDetails.backgroundImage)
          this.$refs.deviceContainerRef.style.height = (this.windowHeight - this.pageHeaderHeight) + 'px'
          // this.parentH = this.windowHeight - this.pageHeaderHeight
          this.parentH = 900
          this.parentLimitation = true // åœ¨çˆ¶å…ƒç´ é«˜åº¦è®¾ç½®åŽå†è®¾ç½®é™åˆ¶æ‹–拽区域，不这样有概率导致父元素高度未设置就限制拖拽
        })
      },

      /**
       * å›¾ç‰‡é¢„览
       * @param text å›¾ç‰‡åœ°å€
       */
      getImgView(text) {
        if (text && text.indexOf(',') > 0) {
          text = text.substring(0, text.indexOf(','))
        }
        return getFileAccessHttpUrl(text)
      },

      /**
       * ç‚¹å‡»ä¿å­˜æŒ‰é’®è°ƒç”¨æŽ¥å£ä¿å­˜æ‹–拽后的位置与设备图标尺寸
       */
      saveDevicePositionAndSizeByApi() {
        console.log('触发保存')
        if (this.isOperatingDevice) {
          api.saveDevicePositionAndSizeApi(this.deviceList).then((res) => {
            if (res.code === 200) {
              this.$notification.success({
                message: '消息',
                description: res.message
              })
              this.isOperatingDevice = false
              if (this.isSwitchChecked) {
                this.isSwitchChecked = false
                this.isResizable = !this.isResizable
                this.isDraggable = !this.isDraggable
              }
              this.getDeviceListByApi(this.$route.params.id)
            }
          })
        } else {
          this.$notification.warning({
            message: '消息',
            description: '请开启功能后再进行保存'
          })
        }
      },

      /**
       * è®¾å¤‡æ‹–拽或缩放时触发事件
       * @param newRect æ‹–拽或缩放后的尺寸及距离
       * @param index æ‹–拽设备在数组中的下标
       */
      resize(newRect, index) {
        // if (newRect.width > 100) {
        //   if (newRect.width / newRect.height < 2) {
        //     this.deviceList[index].fontSize = newRect.width / 10
        //   } else {
        //     this.deviceList[index].fontSize = newRect.height / 5
        //   }
        // } else {
        //   this.deviceList[index].fontSize = 12
        // }
        this.showGuideline = 'block'
        this.deviceList[index].vw = newRect.width
        this.deviceList[index].vh = newRect.height
        this.deviceList[index].coordinateTop = newRect.top
        this.deviceList[index].coordinateLeft = newRect.left
        this.guidelineXTop = newRect.top + newRect.height / 2
        this.guidelineYLeft = newRect.left + newRect.width / 2
      },

      /**
       * æ ¹æ®è®¾å¤‡çŠ¶æ€å€¼èŽ·å–对应设备数量
       * @param value è®¾å¤‡çŠ¶æ€å€¼
       * @returns {number} è®¾å¤‡æ•°é‡
       */
      getDeviceNumberByStatus(value) {
        if (value === 99) return this.deviceList_copy.length
        return this.deviceList_copy.filter((item) => item.equipmentStatus === value).length
      },

      /**
       * å¼€å¯åŠŸèƒ½è§¦å‘事件
       * @param checked å½“前switch状态，是否开启，初始为false
       */
      handleSwitchChange(checked) {
        this.isOperatingDevice = true
        this.isResizable = !this.isResizable
        this.isDraggable = !this.isDraggable
      },

      openDetail(item) {
        if (!this.isSwitchChecked) {
          if (item.equipmentStatus == 0) {
            this.$message.warning('设备处于关机状态！')
            return false
          }
          console.log(item)
          console.log(this.$refs.EquipmentDetailModal)
          this.$refs.EquipmentDetailModal.initData(item.equId)
          this.$refs.EquipmentDetailModal.timerModel(item.equId)
          // this.equipMessageTimer = setInterval(() => {
          //   setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0)
          // },1000*10)
        }
      },

      /**
       * æµè§ˆå™¨å°ºå¯¸å‘生改变时触发
       */
      handleWindowSizeChange() {
        // this.isFullScreen = !this.isFullScreen
        // if (!this.isFullScreen) location.reload() // å¦‚果为全屏模式，则在切换模式时重新加载页面以重新获取浏览器可视区域高度
        const windowHeight =
          window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight
        // this.parentH = 99999
        // const scaleRate = windowHeight / this.windowHeight
        // this.windowHeight = windowHeight
        this.$refs.deviceContainerRef.style.height = (windowHeight - this.pageHeaderHeight) + 'px'
        // const timer = setTimeout(() => {
        //   this.deviceList.forEach(item => {
        //     item.coordinateTop = item.coordinateTop * scaleRate
        //     item.vh = item.vh * scaleRate
        //     console.log('vh', item.vh)
        //   })
        //   this.parentH = windowHeight - this.pageHeaderHeight
        //   console.log('changeDeviceList', this.deviceList)
        // }, 500)
        // console.log('scaleRate', scaleRate)
      },

      checkboxChange(obj) {
        //需要判断是否开启功能，目的是为了关闭定时器避免筛选后设备被定时刷新的新设备覆盖
        if (this.isOperatingDevice) {
          obj.checked = !obj.checked
          if (obj.value !== 99) {
            if (obj.checked) this.checkedStatusCount++
            else this.checkedStatusCount--
          }

          if (obj.value == 99) {
            this.deviceStatusList.forEach(item => {
              if (item.value !== obj.value) item.checked = obj.checked
            })
            if (obj.checked) {
              this.deviceList = this.deviceList_copy
              this.checkedStatusCount = this.deviceStatusList.length - 1
            } else {
              this.deviceList = []
              this.checkedStatusCount = 0
            }
          } else {
            this.deviceStatusList.forEach(item => {
              if (item.value === 99) {
                if (this.checkedStatusCount !== this.deviceStatusList.length - 1 || this.checkedStatusCount === 0) item.checked = false
                if (this.checkedStatusCount === this.deviceStatusList.length - 1) item.checked = true
              }
            })
            if (obj.checked) {
              this.deviceList.push(...this.deviceList_copy.filter(item => item.equipmentStatus === obj.value))
            } else {
              this.deviceList = this.deviceList.filter(item => item.equipmentStatus !== obj.value)
            }
          }
        } else {
          this.$notification.warning({
            message: '消息',
            description: '请开启功能后再进行筛选'
          })
        }
      },

      handleScreenDevive(obj) {
        //需要判断是否开启功能，目的是为了关闭定时器避免筛选后设备被定时刷新的新设备覆盖
        if (this.isOperatingDevice) {
          obj.checked = true
          this.deviceList = this.deviceList_copy
          this.deviceStatusList.forEach(item => {
            if (item.value !== obj.value) item.checked = false
          })

          if (obj.value == 99) this.deviceList = this.deviceList_copy
          else this.deviceList = this.deviceList.filter(item => item.equipmentStatus === obj.value)

        } else {
          this.$notification.warning({
            message: '消息',
            description: '请开启功能后再进行筛选'
          })
        }
      }
    },
    created() {
      if (this.$route.params.id) {
        this.getDeviceListByApi(this.$route.params.id)
        this.getWorkshopDetailsByApi(this.$route.params.id)
      }
      this.checkedStatusCount = this.deviceStatusList.length - 1
    },
    mounted() {
      // ç¦æ­¢ç”¨æˆ·é€‰ä¸­å†…容
      document.onselectstart = () => false

      this.windowHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight

      // åˆ¤æ–­æµè§ˆå™¨å¯è§†åŒºåŸŸé«˜åº¦æ˜¯å¦ç­‰äºŽåˆ†è¾¨çŽ‡ï¼Œè‹¥ç›¸ç­‰åˆ™è¡¨ç¤ºè¿›å…¥æ—¶æµè§ˆå™¨ä¸ºå…¨å±æ¨¡å¼
      // if (this.windowHeight === screen.height) this.isFullScreen = true

      window.addEventListener('resize', this.handleWindowSizeChange)
    },
    beforeDestroy() {
      // ç¡®ä¿é”€æ¯å®šæ—¶å™¨ã€äº‹ä»¶åŠå›žæ”¶èµ„源
      clearInterval(this.timingAcquisition)
      this.timingAcquisition = null
    }
  }
</script>

<style scoped lang="less">
  .full-screen-container {
    background-image: url('../../../assets/Bj.jpg');
    background-size: 100% 100%;
    color: #fff;

    .page-header {
      /*font-size: 50px;*/
      /*text-align: center;*/
      /*position: relative;*/

      .header-left {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 20px;
      }

      .workshop-name {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
      }

      .device-status-info {
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-top: 20px;

        .single-status-info {
          margin: 10px;
          cursor: pointer;

          .status-square {
            width: 14px;
            height: 14px;
            border: 1px solid #fff;
            border-radius: 3px;
          }
        }
      }
    }

    .content-container {
      width: 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;

      .guideline {
        position: absolute;
        border: 1px dashed #ccc;
      }

      .guidelineX {
        width: 1920px;
        left: 0;
      }

      .guidelineY {
        top: 0;
        height: 900px;
      }

      .single-device {
        position: absolute;
        border: 1px solid transparent;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        cursor: default;

        &:active {
          border: 1px solid #1890ff;
        }

        .device-status {
          width: 100%;
          height: 100%;
          display: flex;
          -webkit-align-items: flex-end;
          -moz-align-items: flex-end;
          -ms-align-items: flex-end;

          .status-image {
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 10px;
            height: 60%;
            margin-right: 5px;
          }

          .device-image {
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  /deep/ .ant-checkbox-inner {
    background-color: transparent;
    border-color: #fff;
  }
</style>

 src/views/mdc/base/WorkshopSignageEntrance.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,69 @@
<template>
  <div class="page-container">
    <a-list
      :grid="{ gutter: [{xs: 0, sm: 24, md: 24, lg: 56, xl: 64, xxl: 80},20], xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }"
      :data-source="workshopList">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <div class="workshop-name" @click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}</div>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
  import api from '@/api/mdc'

  export default {
    name: 'WorkshopSignageEntrance',
    data() {
      return {
        indexStyle: 1,
        workshopList: []
      }
    },
    created() {
      this.getWorkshopListByApi()
    },
    methods: {
      /**
       * é€šè¿‡è½¦é—´Id跳转至相应车间大屏看板
       * @param id è½¦é—´Id
       */
      navigateToWorkshopSignage(id) {
        const url = this.$router.resolve(`/MdcWorkshopSignage/${id}`).href
        window.open(url, '_blank')
      },
      /**
       * èŽ·å–车间列表
       */
      getWorkshopListByApi() {
        api.getWorkshopListInHomePageApi().then(res => {
          console.log('res', res)
          if (res.result && res.result.length > 0) {
            this.workshopList = res.result
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .page-container {
    padding: 30px 30px 0;

    .workshop-name {
      width: 100%;
      background: #fff;
      padding: 55px 0;
      border-radius: 20px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 30px;
      cursor: pointer;
    }
  }

</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1542 @@
<template>
  <div ref="wrap" @mouseenter="getModalNode">
    <a-modal
      :title="title"
      width="70%"
      :visible="visible"
      :getContainer="() => this.$refs.wrap"
      @cancel="handleCancel"
      cancelText="关闭"
      wrap-class-name="full-modal"
      centered
      :footer="null"
    >
      <div
        id="mdcEquiInfo"
        style="padding:1px;"
      >
        <table
          width="100%"
          style="border-collapse: separate;border-spacing:0px; color: #fff"
        >
          <tr>
            <td v-if="this.spindlebeilv != null">
              <div
                class="mdcEquipMon"
                style="width: 250px; height: 200px;margin : 0 auto;padding: 0;"
                align="center"
              >
                ä¸»è½´å€çŽ‡
                <div
                  id="mdcEquiMoniGauge1"
                  ref="chart1"
                  style="width: 100%; height: 95%;"
                ></div>
              </div>
            </td>
            <td v-if="this.feedbeilv != null">
              <div
                class="mdcEquipMon"
                style="width: 210px; height: 180px;margin : 0 auto;"
                align="center"
              >
                è¿›ç»™å€çŽ‡
                <div
                  id="mdcEquiMoniGauge2"
                  ref="chart2"
                  style="width: 100%; height: 95%;"
                ></div>
              </div>
            </td>
            <td v-if="this.spindleload != null">
              <div
                class="mdcEquipMon"
                style="width: 210px; height: 180px;margin : 0 auto;"
                align="center"
              >主轴负荷
                <div
                  id="mdcEquiMoniGauge3"
                  ref="mdcEquiMoniGauge3"
                  style="width: 100%; height: 95%;"
                ></div>
              </div>
            </td>
            <td v-if="this.rapidfeed != null">
              <div
                class="mdcEquipMon"
                style="width: 210px; height: 180px;margin : 0 auto;"
                align="center"
              >快速进给倍率
                <div
                  id="mdcEquiMoniGauge4"
                  ref="mdcEquiMoniGauge4"
                  style="width: 100%; height: 95%;"
                ></div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="5">
              <a-descriptions
                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>

              <!-- <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="运行数据"
                v-show="mdcDriveTypeParamConfigList != null"
                v-if="driverType != 'PLC'"
                :column="4"
                class="operationData"
              >

                <a-descriptions-item
                  v-for="(item,id) in mdcDriveTypeParamConfigList  "
                  :key="item.id"
                  :label="item.chineseName"
                >
                  <a-tooltip @mouseenter="mouseEnterItem">
                    <template slot="title">
                      {{item.value|formatDescriptionsItem}}
                    </template>
                    <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>
      </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'
  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)
        }
      },

      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;
  }

  .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;
    }
  }

  /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-close {
    color: #1191b0;
    font-size: 24px;
  }

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

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

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

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

  /*/deep/ .ant-descriptions-view {*/
    /*padding: 0 20px;*/
  /*}*/

  /deep/ .ant-descriptions-view .ant-descriptions-row .ant-descriptions-item {
    padding-bottom: 5px;
  }

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

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

  .mdcEquipMon {
    color: #fff;
  }

  /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>