<template>
  <div id="body"
    :style="{ 'width': `${style.width}px`, 'height': `${style.height}px`, 'transform': `${style.transform}` }"
    class="background">

    <el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135);z-index: 999">
      <!--<el-row>-->
      <div style="height: 80px; width: 100%">
        <div id="htmlTitleImg">
          <div style="display: flex">
            <i class="title-left"><img :src="titleLeft"></i>
            <div style="line-height: 80px;margin: 0 100px 0 100px">可视化远程监控平台</div>
            <i class="title-left"><img :src="titleRight"></i>
          </div>
        </div>
        <el-button class="openVoid" @click="openVoid">
          打开监控
        </el-button>
        <div style="position: relative;height: 100%;width: 280px; float: left;margin: 0 40px">
          <div style="position: absolute;display: flex;justify-content: space-evenly;width: 100%">
            <!--<img :src="titlePng" style="width: 280px;height: 90px;margin-top: 5px">-->
            <!--<img :src="titlePng2" style="width: 280px;height: 90px;background-color:#fff;">-->
          </div>
        </div>
        <div style="position: relative;height: 100%;width: 280px; float: right;margin: 0 40px">
          <div style="position: absolute;display: flex;justify-content: space-evenly;width: 100%">
            <!--<img :src="titlePng" style="width: 280px;height: 90px">-->
            <!--<img :src="titlePng" style="width: 280px;height: 90px;background-color:#fff;margin-top: 5px">-->
          </div>
        </div>
      </div>
    </el-row>
    <div style="position: fixed;top: 90px;left:425px;height: 150px;width: 1090px;float: left;display: flex;justify-content: space-evenly;
        opacity: 1;z-index: 998;">
      <el-col v-for="(item, index) in statusInformation" :key="index" :span="4"
        style="height: 100%;font-weight: bolder">
        <div
          style="width: 200px;height: 80px;line-height: 40px;float:left;margin: 10px 20px 0 -20px;letter-spacing: 4px;background-color:#0f2d51;border: 1px solid #124d8d;">
          <div :style="{ color: item.color }" style="font-size: 25px;text-align: center;">
            {{ item.text }}
          </div>
          <div style="text-align: center;font-size: 22px;color: #fff">
            {{ item.data }}个
          </div>
        </div>
      </el-col>
    </div>
    <el-row>
      <div style="position: relative;height: 1080px;">
        <!--WEBGL渲染位置-->
        <div style="height: 100%; width: 100%;position: fixed;z-index: auto;top: 0px;left: 0px">
        </div>
        <!--<div style="height: 100%; width: 100%;position: absolute;">-->
        <!--  <div style="width: 100%;height:980px;filter:blur(10);z-index: 999;">-->
        <!--    &lt;!&ndash;<iframe&ndash;&gt;-->
        <!--    &lt;!&ndash;    id="dmtComIframe"&ndash;&gt;-->
        <!--    &lt;!&ndash;    ref="dmtComIframe"&ndash;&gt;-->
        <!--    &lt;!&ndash;    :src="ifsrc"&ndash;&gt;-->
        <!--    &lt;!&ndash;    frameborder="0"&ndash;&gt;-->
        <!--    &lt;!&ndash;    height="980px"&ndash;&gt;-->
        <!--    &lt;!&ndash;    width="100%"></iframe>&ndash;&gt;-->
        <!--  </div>-->
        <!--</div>-->
        <div :style="{ display: isShow }" class="data-box" style="left:15px; top:20px;height: 960px">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 20px;">
            <div class="indicatorText">
              <div class="data-title-left"></div>
              <span>关键数据监控</span>
            </div>
          </div>
          <div
            style="padding: 0 10px;text-align: center;font-size: 18px;margin-top: 35px;margin-bottom:10px;letter-spacing: 1px;">
            <div style="text-align: left;">
              <span style="padding: 0 10px 0 30px">设备:</span>
              <el-select v-model="clickOpName" placeholder="请选择设备" style="width: 250px;"
                @change="getDeviceDataList(); getSelectItemList('温度'); getSelectItemList('压力');">
                <el-option v-for="item in OpNameList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div style="height:850px;overflow: auto;">
              <table class="planTable" style="width: 350px;font-size: 15px;color: #fff">
                <tr v-for="(item, index) in deviceDataList" style="height: 35px">
                  <td style="width: 10%;text-align: right">{{ index + 1 }}</td>
                  <td style="width: 42%;text-align: right">{{ item.name }}</td>
                  <td style="width: 13%;text-align: right">{{ item.值 }}</td>
                  <td style="width: 15%;text-align: left">{{ item.unit }}</td>
                </tr>
              </table>
            </div>

          </div>
        </div>

        <div :style="{ display: isShow }" class="data-box" style="right:15px; top:20px;overflow: hidden;">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 20px;">
            <div class="indicatorText">
              <div class="data-title-left"></div>
              <span>近七天主要异常报警</span>
            </div>
          </div>
          <div>
            <div class="errItemList">
              <div v-for="(item) in errDataList" class="item">
                <div class="name">{{ item.name }}</div>
                <div class="value">
                  <el-progress :color="item.color" :percentage="Number(item.data)" :stroke-width="17"
                    class="right-to-left-progress"></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div :style="{ display: isShow }" class="data-box" style="right:15px; top:345px;">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 20px;">
            <div class="indicatorText">
              <div class="data-title-left"></div>
              <span>设备累计运行时长</span>
            </div>
          </div>
          <div>
            <div id="errorPie" style="width: 100%; height: 240px;margin-top: 20px"></div>
          </div>
        </div>

        <div :style="{ display: isShow }" class="data-box" style="right:15px; top:670px;">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 20px;">
            <div class="indicatorText">
              <div class="data-title-left"></div>
              <span>视频监控</span>
            </div>
          </div>
          <div class="view" style="margin-top: 10px;">
            <div v-show="UIKitDEMO != null" id="ezuikit-player" />
            <div v-show="UIKitDEMO == null" id="CameraImg" />
          </div>
        </div>
        <div :style="{ display: isShow }" class="data-box" style="left:430px; top:670px;width: 1058px">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>

          <div style="width: 100%; height: 20px;">
            <div class="indicatorText" style="position: relative;">
              <div class="data-title-left"></div>
              <span>近七天运行情况</span>
            </div>
          </div>
          <div id="deviceColumnar" style="width: 100%; height: 260px;margin-top: 0px"></div>
        </div>

        <div :style="{ display: isShow }" class="data-box" style="left:430px; top:120px;width: 1058px;height: 532px;">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 20px;">
            <div class="indicatorText" style="position: relative;">
              <div class="data-title-left"></div>
              <span>关键数据实时分析曲线</span>
            </div>
          </div>
          <div class="echarts"></div>
          <div class="selectItemOneBox">
            <div>
              <div class="item">
                <el-select v-model="clickItemList" filterable multiple collapse-tags placeholder="查询类型"
                  @change="searchTableData(1)" style="width: 400px;margin-left: 40px">
                  <el-option v-for="item in selectItemList" :key="item" :label="item" :value="item" size="mini" />
                </el-select>
              </div>
              <div id="echartsItemLine" style="width: 500px;height: 450px" />
            </div>
            <div>
              <div class="item">
                <el-select v-model="clickItemList2" filterable multiple collapse-tags placeholder="查询类型"
                  @change="searchTableData(2)" style="width: 400px;margin-left: 40px">
                  <el-option v-for="item in selectItemList2" :key="item" :label="item" :value="item" size="mini" />
                </el-select>
              </div>
              <div id="echartsItemLine2" style="width: 500px;height: 450px" />
            </div>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import * as echarts from 'echarts'
import { opname, mqttIp, mqttPort } from '@/utils/request'
import mqtt from 'mqtt'
import CryptoJS from 'crypto-js'
import EZUIKit from 'ezuikit-js'


export default {
  name: 'MingLuo',
  data: function () {
    return {
      ifsrc: '',
      classOption: {
        step: 0.5,
        direction: 1,
        limitMoveNum: 5,
        hoverStop: false
      },
      form: {
        planData: 0
      },
      alarmTypes: {},
      dialogFormVisible1: false,
      isShow1: true,
      isShow: 'inline',
      isShowBtn1: false,
      isShowBtn: 'none',
      src: localStorage.getItem('twinAddress'),
      statusInformation: [
        {
          color: '#81d3f8',
          data: 130,
          text: '设备总数'
        },
        {
          color: '#5fa57b',
          data: 120,
          text: '正常运行数'
        },
        {
          color: '#ebc07f',
          data: 3,
          text: '在线数'
        },
        {
          color: '#ec808d',
          data: 0,
          text: '离线数'
        },
        {
          color: '#764e9e',
          data: '3',
          text: '实时报警数'
        }
      ],
      titlePng: '',
      titlePng2: '',
      titleLeft: '',
      titleRight: '',
      myChart4X1: [],
      myChart4Y1: [],
      myChart4Alarm1: [],
      myChart4Alarm2: [],
      planData: 1,
      realData: 0,
      JPH: 50,
      OEE: 80,
      averData: 0,
      timer_1: null,
      timer_2: null,
      timer_3: null,
      timer_4: null,
      chartDom1: null,
      chartDom2: null,
      chartDom3: null,
      chartDom4: null,
      chartDom5: null,
      chartDom6: null,
      chartDom7: null,
      flag: 0,
      PageCount: 0,
      total: 0, // 总条数
      pageSize: 5, // 每页显示条数
      PageCurrent: 1, // 后台获取页
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      },
      clickOpName: '',
      OpNameList: [],
      deviceDataList: [
        { name: '产品气压力', 值: '85', unit: 'bar' },
        { name: '产品气压力', 值: '85', unit: 'bar' },
        { name: '产品气压力', 值: '85', unit: 'bar' },
        { name: '产品气压力', 值: '85', unit: 'bar' }
      ],
      positionSocietyData: {}, // 点位对应数据表
      cityDataList: [
        // { city: '佛山', data: '50', color: '#ec808d' },
        // { city: '肇庆', data: '30', color: '#ffff80' },
        // { city: '惠州', data: '20', color: '#00c0c0' },
        // { city: '重庆', data: '30', color: '#4b7902' }
        // { city: '西安', data: '20', color: '#e6ad00' }
      ],
      cityColorList: [
        '#ec808d', // 柔和的粉色
        '#ffff80', // 亮黄色
        '#00c0c0', // 青蓝色
        '#4b7902', // 深绿色
        '#e6ad00', // 金黄色
        '#ff6666', // 亮红色
        '#66ccff', // 浅蓝色
        '#9966cc', // 紫色
        '#ffcc99', // 浅橙色
        '#669966', // 橄榄绿色
        '#cc99ff', // 浅紫色
        '#ff9966', // 橙色
        '#99ccff', // 淡蓝色
        '#cc6666', // 深红色
        '#99cc99' // 浅绿色
      ],
      errDataList: [
        { name: '设备1000A', data: '25', color: '#ec808d' },
        { name: '设备1000B', data: '55', color: '#ffff80' },
        { name: '设备1000C', data: '20', color: '#00c0c0' },
      ],
      chartErrPieData: [
        { value: 25, name: '设备1000A', itemStyle: { color: '#ec808d' } },
        { value: 55, name: '设备1000B', itemStyle: { color: '#ffff80' } },
        { value: 20, name: '设备1000C', itemStyle: { color: '#00c0c0' } },
      ],
      chinaMapCityList: [
        {
          name: '佛山市',
          count: 3,
          departmentnames: [''],
          value: [113.32446, 23.0265],
          itemStyle: { color: '#eeb804' }
        },
        {
          name: '肇庆市',
          count: 5,
          departmentnames: [''],
          selected: true,
          value: [112.47235, 23.07177],
          itemStyle: { color: '#eeb804' }
        },
        {
          name: '惠州市',
          count: 2,
          departmentnames: [''],
          selected: true,
          value: [114.41056, 23.10647],
          itemStyle: { color: '#eeb804' }
        },
        {
          name: '重庆市',
          count: 3,
          departmentnames: [''],
          selected: true,
          value: [106.53061, 29.54401],
          itemStyle: { color: '#f56321' }
        }
      ],
      chartErrPie: null,
      chartColumnar: null,
      chinaEcharts: null,
      echartsItemLine: null,
      echartsItemLine2: null,
      chartErrPieOption: null,
      chartColumnarOption: null,
      chartColumnarX: ['1', '2', '3', '4', '5', '6', '7'],
      chartColumnarYData1: [49, 49, 49, 49, 49, 49, 49],
      chartColumnarYData2: [43, 43, 43, 43, 43, 43, 43],
      chartColumnarYData3: [45, 45, 45, 45, 45, 45, 45],
      chartColumnarYData4: [16, 16, 16, 16, 16, 16, 16],
      chartColumnarYData5: [7, 7, 7, 7, 7, 7, 7],
      userId: '',
      nowUserData: {},
      UIKitDEMO: null,
      clickItemList: [],
      selectItemList: [],
      clickItemList2: [],
      selectItemList2: [],

    }
  },
  created() {


    this.ifsrc = window.dt_Config.dt_iframe
    this.getLogo()
  },
  mounted() {
    const scope = this

    let Uid = ''
    let urlParams = new URLSearchParams(window.location.search);
    console.log('读取参数a', urlParams.get('Uid'))
    console.log('读取参数b', this.$route.query.Uid)
    if (urlParams.get('Uid')) {
      Uid = urlParams.get('Uid')
    }
    if (this.$route.query.Uid) {
      Uid = this.$route.query.Uid
    }

    console.log('加密文本1111111', Uid)
    let decrypt = this.decryptUid(Uid)
    console.log('解密文本1111111', decrypt)
    this.userId = decrypt
    // 调用存储过程 获取该用户的权限，再确定跳转页面
    this.checkUserPermission(this.userId, Uid)

    // this.initMqtt()
    this.getOpName()

    this.initEcharts()
    // this.searchChartChinaData()
    this.init()
    // this.init2()

    // this.drawFaultType()
    // this.drawFaultTime()
    // this.drawRunStartChart()
    this.timer_1 = setInterval(this.init, 1000 * 10)
    // this.timer_2 = setInterval(this.init1, 60000)
    // this.timer_3 = setInterval(this.init2, 60000)
    // this.timer_4 = setInterval(this.init3, 500)

    /* 窗口改变事件*/
    scope.setScale()
    window.addEventListener('resize', () => {
      scope.setScale()
    })
  },
  beforeDestroy() {
    clearInterval(this.timer_1)
    clearInterval(this.timer_2)
    clearInterval(this.timer_3)
    clearInterval(this.timer_4)
  },
  methods: {
    init() {
      if (this.clickOpName != '') {
        this.getDeviceDataList()
        this.searchTableData(1)
        this.searchTableData(2)
      }
      this.searchChartData()
      // this.getImportantCityList()
      this.sevenDaysWarning()
      this.getTopStatusData()
      this.getTopDay7RunTimeStatus()
      // this.getChinaCityPosList()
      // 获取中间两个图表的测量项与测量数据
    },
    // 读取工位点位
    searchTableData(type) {
      let itemName;
      if (type == 1) {
        itemName = this.clickItemList
      } else {
        itemName = this.clickItemList2
      }
      var param = []
      param[0] = ['设备名称', this.clickOpName]
      param[1] = ['变量名称', JSON.stringify(itemName)]
      var Data = this.CreateData('11', 'TV_实时分析曲线_变量_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.showEcharts(response.data, type)
      })
    },
    // 绘制图表
    showEcharts(tableData, type) {
      // 将时间字符串转换为时间戳，并按时间排序
      tableData.forEach(item => {
        item.time = new Date(item.创建时间).getTime()
      })
      tableData.sort((a, b) => a.time - b.time)

      const seriesList = []
      let dataList = []
      if (type == 1) {
        dataList = this.clickItemList
      } else {
        dataList = this.clickItemList2
      }

      // 检查tableData是否有数据
      if (!tableData || tableData.length === 0) {
        // // 如果没有数据，清空图表
        // if (type === 1) {
        //   this.echartsItemLine.clear();
        // } else {
        //   this.echartsItemLine2.clear();
        // }
        return; // 退出函数，因为没有数据可处理
      }

      for (const item of dataList) {
        seriesList.push({
          name: item,
          type: 'line',
          smooth: true,
          showSymbol: true,
          data: tableData.filter(item2 => item2.变量名称 === item).map(item => [item.创建时间, item.值]),
          lineStyle: {
            // color: '#0b59da', // 这里设置线条颜色
            width: 2 // 线条宽度
          },
          itemStyle: {
            normal: {
              // color: '#ffffff', // 折拐点的颜色
              // borderColor: '#0b59da', // 折拐点边框颜色
              borderWidth: 2 // 折拐点边框宽度
            }
          }
        })
      }

      const config = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let tooltipText = '';
            params.forEach(function (param) {
              if (param.value) {
                const createTime = new Date(param.value[0]).toLocaleString();
                const variableName = param.seriesName.replace('³', '3');
                const value = param.value[1];
                tooltipText += `${createTime}<br>${variableName}: ${value}<br>`;
              }
            });
            return tooltipText;
          }
        },
        legend: {
          data: dataList,
          textStyle: {
            color: 'white' // 设置legend文字颜色为白色
          }
        },
        xAxis: {
          type: 'time',
          axisLabel: {
            color: 'white', // 设置X轴字体颜色为白色
          },
          splitLine: {
            show: false
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white' // 设置X轴字体颜色为白色
          },
        },
        series: seriesList
      }
      if (type == 1) {
        this.echartsItemLine.setOption(config)
      } else {
        this.echartsItemLine2.setOption(config)
      }
    },
    getSelectItemList(keyName) {
      var param = []
      param[0] = ['设备名称', this.clickOpName]
      param[1] = ['keyName', keyName]
      var Data = this.CreateData('11', 'WEB_实时分析曲线_测量项目_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (keyName == '压力') {
          this.clickItemList = []
          this.selectItemList = []
          if (response.data.length !== 0) {
            for (const item of response.data) {
              this.selectItemList.push(item.变量名称)
            }
            if (this.selectItemList.length > 0) {
              if (this.clickItemList.length == 0) {
                this.clickItemList.push(this.selectItemList[0])
              }
              this.searchTableData(1)
            }
          }
        } else if (keyName == '温度') {
          this.clickItemList2 = []
          this.selectItemList2 = []
          if (response.data.length !== 0) {
            for (const item of response.data) {
              this.selectItemList2.push(item.变量名称)
            }
            if (this.selectItemList2.length > 0) {
              if (this.clickItemList2.length == 0) {
                this.clickItemList2.push(this.selectItemList2[0])
              }
              this.searchTableData(2)
            }
          }
        }
      })
    },
    decryptUid(encrypt) {
      var decodedEncrypt = decodeURIComponent(encrypt);
      var aseKey = "meswork."
      var decrypt = CryptoJS.AES.decrypt(decodedEncrypt, CryptoJS.enc.Utf8.parse(aseKey), {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      }).toString(CryptoJS.enc.Utf8)
      return decrypt
    },
    checkUserPermission(userId, uid) {
      var param = []
      param.push(['userId', userId])
      var Data = this.CreateData('11', 'TV_人员信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          if (response.data[0].isClient == 1) {
            this.nowUserData = response.data[0]
            this.checkConnect()
          } else {
            var uuid = encodeURIComponent(uid);
            // this.$router.push('/?Uid=' + uuid)
            this.$router.replace({path:'/?Uid=' + uuid})
          }
        } else {
          // this.$router.push('/None')
          this.$router.replace({path:'/None'})
        }
      })
    },
    // 根据现有数据检查连接状态
    checkConnect() {
      console.log('---------1111111------clickCameraRow', this.nowUserData)
      // 先使用数据库存储的 accessToken 与 deviceSerial 校验是否得到url
      // 如果得到url 调用播放 未 得到 url 重新获取 accessToken 后再次获取url
      axios.post('https://open.ys7.com/api/lapp/v2/live/address/get',
        // 使用 URLSearchParams 对象来编码请求数据
        new URLSearchParams({
          accessToken: this.nowUserData.accessToken,
          deviceSerial: this.nowUserData.deviceSerial,
          code: this.nowUserData.code
        }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.url = res.data.data.url
            this.createCameraDiv(res.data.data.url, this.nowUserData.accessToken, this.nowUserData.deviceSerial)
          } else {
            if (res.data.code == 10002) {
              console.log('【获取播放url】Token失效，自动重新获取~~~~~~~')
              this.getAccessToken()
            } else {
              this.$message.warning('【获取播放url】失败 错误消息：【' + res.data.code + '】' + res.data.msg)
              this.time1 = setTimeout(() => {
                this.checkConnect()
              }, 1000 * 5)
            }
          }
        })
    },
    // 获取工位新Token并连接该工位 用于摄像头change
    getNowTokenAndRunCheckConnect() {
      var param = []
      param.push(['userId', userId])
      var Data = this.CreateData('11', 'TV_人员信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.nowUserData = response.data[0]
          this.checkConnect()
        }
      })
    },
    getAccessToken() {
      axios.post('https://open.ys7.com/api/lapp/token/get',
        // 使用 URLSearchParams 对象来编码请求数据
        new URLSearchParams({
          appKey: this.nowUserData.appKey,
          appSecret: this.nowUserData.appSecret
        }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(res => {
          if (res.data.code == 200) {
            console.log('新Token获取成功，开始存入~~~~~~')
            // 存储过程存入数据库，将返回的结果重新存入 this.nowUserData 重新调用 checkConnect
            var param = []
            param[0] = ['deviceSerial', this.nowUserData.name]
            param[1] = ['accessToken', res.data.data.accessToken]
            var Data = this.CreateData('11', 'WEB_基础_摄像头_更新Token', param)
            this.ExecDatabase(Data).then(response => {
              if (response.data.length !== 0) {
                this.nowUserData = response.data[0]
                this.checkConnect()
              }
            })
          } else {
            if (res.data.code == 10017) {
              this.$message.warning('【appKey】不存在，请联系管理员检查Key是否正确!')
            } else {
              this.$message.warning('获取【accessToken】失败 错误消息：【' + res.data.code + '】' + res.data.msg)
            }
          }
        })
    },
    createCameraDiv(url, accessToken, deviceSerial) {
      // 先判断是否已经存在UIkitDEMO对象了，如果存在则调用切换地址
      if (this.UIKitDEMO) {
        // console.log('111111', url, accessToken, deviceSerial)
        this.UIKitDEMO.changePlayUrl({
          url: url,
          accessToken: accessToken,
          deviceSerial: deviceSerial
        })
      } else {
        // console.log('222222', url, accessToken, deviceSerial)
        this.UIKitDEMO = new EZUIKit.EZUIKitPlayer({
          id: `ezuikit-player`,
          url: url,
          accessToken: accessToken,
          useHardDev: true, // 开启高性能模式
          height: 270,
          width: 400,
          quality: 'qp',
          handleSuccess: () => {
            console.log('-------------------------------------视频开始播放，调用播放回调-----------------------')
            setTimeout(() => {
              this.UIKitDEMO.closeSound()
            }, 100)
          }
        })
      }
    },
    getChinaCityPosList() {
      var param = []
      var Data = this.CreateData('11', 'TV_地图城市地理坐标_查询', param)
      this.ExecDatabase(Data).then(response => {
        const temp = []
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            const item = response.data[i]
            temp.push({
              name: item.城市名称,
              count: item.数量,
              departmentnames: [''],
              value: [item.坐标X, item.坐标Y],
              itemStyle: { color: item.颜色 }
            })
          }
        }
        if (JSON.stringify(this.chinaMapCityList) != JSON.stringify(temp)) {
          console.log('图标不同，重新渲染地图')
          this.chinaMapCityList = temp
          this.setChinaEcharts()
        }
      })
    },
    // 获取近七天运行状态
    getTopDay7RunTimeStatus() {
      var param = []
      param.push(['Personnel_Number', this.userId])
      var Data = this.CreateData('11', 'TV_近七天运行情况_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.chartColumnarX = []
        this.chartColumnarYData1 = []
        this.chartColumnarYData2 = []
        this.chartColumnarYData3 = []
        this.chartColumnarYData4 = []
        this.chartColumnarYData5 = []

        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            const item = response.data[i]
            this.chartColumnarX.push(item.日期.replace('day', ''))
            this.chartColumnarYData1.push(item.设备总数)
            this.chartColumnarYData2.push(item.在线设备数)
            this.chartColumnarYData3.push(item.待机设备数)
            this.chartColumnarYData4.push(item.离线设备数)
            this.chartColumnarYData5.push(item.报警设备数)
          }
        }
        this.drawDailyOutput()
      })
    },
    getTopStatusData() {
      var param = []
      param.push(['Personnel_Number', this.userId])
      var Data = this.CreateData('11', 'TV_顶部状态栏_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          const data = response.data[0]
          this.statusInformation[0].data = data.设备总数
          this.statusInformation[1].data = data.正常运行数
          this.statusInformation[2].data = data.在线数
          this.statusInformation[3].data = data.离线数
          this.statusInformation[4].data = data.实时报警数
        }
      })
    },
    // 近七天主要异常预警
    sevenDaysWarning() {
      var param = []
      var Data = this.CreateData('11', 'TV_近七天主要异常预警_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.errDataList = []
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            const item = response.data[i]
            this.errDataList.push({ name: item.报警内容, data: item.比例, color: this.cityColorList[i] })
          }
        } else {
          this.errDataList.push({ name: '无异常', data: 100, color: this.cityColorList[6] })
        }
      })
    },
    // 重点城市分布查询
    getImportantCityList() {
      var param = []
      var Data = this.CreateData('11', 'TV_重点城市分布_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.cityDataList = []
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            const item = response.data[i]
            this.cityDataList.push({ city: item.城市, data: item.比例, color: this.cityColorList[i] })
          }
        }
      })
    },
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    // 查询工位号
    getOpName() {
      var param = []
      param.push(['Personnel_Number', this.userId])
      var Data = this.CreateData('11', '工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.OpNameList = []
        for (const item of response.data) {
          this.OpNameList.push({ label: item.公司 + item.工位号, value: item.工位号 })
        }
        if (this.OpNameList.length > 0) {
          this.clickOpName = this.OpNameList[0].value
          this.getSelectItemList('温度')
          this.getSelectItemList('压力')
          this.getPositionSocietyData()
        }
      })
    },
    getPositionSocietyData() {
      this.positionSocietyData = []
      var param = []
      var Data = this.CreateData('11', '基础_参数画面_数值对应名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.positionSocietyData = {}
        for (let item of response.data) {
          if (!(item.参数名称 in this.positionSocietyData)) {
            this.positionSocietyData[item.参数名称] = {}
          }
          this.positionSocietyData[item.参数名称][item['变化数值']] = { name: item.数值名称, color: item.数值颜色 }
        }
        this.getDeviceDataList()
      })
    },
    searchRobotPoseSpeed() {
      var param = []
      var Data = this.CreateData('11', '基础数据_机器人信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (const argument of response.data) {
          if (this.robotInfo[argument.RobotCode]) {
            this.robotInfo[argument.RobotCode]['tcp'] = this.solvePose(argument.CurrentTcpPose)
            this.robotInfo[argument.RobotCode]['speed'] = argument.CurrentSpeed
            this.robotInfo[argument.RobotCode]['alarm'] = this.solveAlarm(argument.AlarmInfo)
            const data = {
              type: 'robotInfo',
              data: {
                RobotCode: argument.RobotCode,
                tcp: this.robotInfo[argument.RobotCode]['tcp'],
                speed: this.robotInfo[argument.RobotCode]['speed'],
                alarm: this.robotInfo[argument.RobotCode]['alarm']
              }
            }
            this.$refs.dmtComIframe.contentWindow.postMessage(data, '*')
            // this.$refs.dmtCom.updateLabelInfoSpeedPose(argument.RobotCode, this.robotInfo[argument.RobotCode]['tcp'], this.robotInfo[argument.RobotCode]['speed'], this.robotInfo[argument.RobotCode]['alarm'])
          }
        }
      })
    },
    solvePose(poseString) {
      let json = {
        X: '0',
        Y: '0',
        Z: '0',
        A: '0',
        B: '0',
        C: '0'
      }
      try {
        json = JSON.parse(poseString)
        if (!json) {
          json = {
            X: '0',
            Y: '0',
            Z: '0',
            A: '0',
            B: '0',
            C: '0'
          }
        }
      } catch (e) {
        console.log(e.toString())
      }
      return {
        'tx': json.X,
        'ty': json.Y,
        'tz': json.Z,
        'rx': json.A,
        'ry': json.B,
        'rz': json.C
      }
    },
    solveAlarm(poseString) {
      if (poseString === '') poseString = '{}'
      let json = [
        {
          'Time': '',
          'AlarmMessage': '',
          'SeverityMessage': ''
        },
        {
          'Time': '',
          'AlarmMessage': '',
          'SeverityMessage': ''
        },
        {
          'Time': '',
          'AlarmMessage': '',
          'SeverityMessage': ''
        }
      ]
      try {
        json = JSON.parse(poseString)
        if (!json) {
          json = [
            {
              'Time': '',
              'AlarmMessage': '',
              'SeverityMessage': ''
            },
            {
              'Time': '',
              'AlarmMessage': '',
              'SeverityMessage': ''
            },
            {
              'Time': '',
              'AlarmMessage': '',
              'SeverityMessage': ''
            }
          ]
        }
      } catch (e) {
        console.log(e.toString())
      }
      return json
    },
    initEcharts() {
      this.chartErrPie = echarts.init(document.getElementById('errorPie'))
      this.chartColumnar = echarts.init(document.getElementById('deviceColumnar'))
      // this.chinaEcharts = echarts.init(document.getElementById('chinaEcharts'))
      this.echartsItemLine = echarts.init(document.getElementById('echartsItemLine'))
      this.echartsItemLine2 = echarts.init(document.getElementById('echartsItemLine2'))
    },
    getDeviceDataList() {
      var param = []
      param.push(['设备名称', this.clickOpName])
      var Data = this.CreateData('11', 'TV_关键数据监控_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.WebApi_ReadDevice(response.data).then(tagIdList => {
            for (let item of tagIdList) {
              item.值 = this.formatNumberString(item.值)
              this.getShowData(item)
            }
            this.deviceDataList = tagIdList
          })
        }
      })
    },
    // 处理数据
    getShowData(item) {
      if (item.name in this.positionSocietyData) {
        if (item.值 in this.positionSocietyData[item.name]) {
          try {
            this.positionSocietyData[item.name][item.值].name ? item.值 = this.positionSocietyData[item.name][item.值].name : ''
          } catch (error) {
            console.log("this.positionSocietyData[item.name]", this.positionSocietyData[item.name], item.值)
            console.log(error)
          }
        }
      }
    },
    formatNumberString(str) {
      // 使用parseFloat尝试转换字符串为数字
      let num = parseFloat(str);
      // 使用isNaN检查转换后的值是否为NaN，如果不是NaN，说明可以转换为数字
      if (!isNaN(num)) {
        // 将数字转换为字符串
        let numStr = num.toString();
        // 找到小数点的位置
        let dotIndex = numStr.indexOf('.');
        // 如果存在小数点，并且小数位数大于两位
        if (dotIndex !== -1 && numStr.length - dotIndex > 3) {
          // 截取字符串，保留两位小数
          return numStr.substring(0, dotIndex + 3);
        } else {
          // 如果小数位数小于等于两位，直接返回原数字的字符串形式
          return numStr;
        }
      } else {
        // 如果转换后的值为NaN，返回原字符串
        return str;
      }
    },
    searchChartData() {
      var param = []
      param.push(['userId', this.userId])
      var Data = this.CreateData('11', 'TV_设备累计运行时间_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.WebApi_ReadDevice(response.data).then(tagIdList => {
            this.chartErrPieData = []
            for (let i = 0; i < tagIdList.length; i++) {
              const item = tagIdList[i]
              this.chartErrPieData.push({ name: item.设备编号, value: item.值 }) // itemStyle: { color: this.cityColorList[i] }
            }
            this.drawDashboardOne()
          })
        }
      })
    },
    searchChartDataMySql() {
      const url = '/SelectPlanOutput'
      const params = {}
      this.ExecDT_Process_Get(url, params).then(response => {
        let all = 0
        for (const info of this.statusInformation) {
          if (info.id === 'ActualOutput') info.data = response.data['PlanOutputCount']
          if (info.id === 'rhythm') info.data = response.data['PlanOutputCountH']
          if (info.id === 'ProductionPlan') all = info.data
        }
        this.planProcess = Math.floor(parseFloat(response.data['PlanOutputCount']) / all * 100 * 100) / 100
      })

      const url1 = '/SelectSevenPlanOutput'
      const params1 = {}
      this.ExecDT_Process_Get(url1, params1).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.myChart4X[i] = response.data[i].date.substring(response.data[i].date.length - 5, response.data[i].date.length)
          this.myChart4Y[i] = response.data[i].num
          this.averData += response.data[i].num
        }
        this.averData = parseInt(this.averData)
        this.drawDailyOutput()
      })
    },
    searchChartData1() {
      var param4 = []
      var Data4 = this.CreateData('11', '生产看板_生产可动率_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        this.performanceRate = response.data[0].性能开动率
        this.timeRate = response.data[0].时间开动率
        for (const info of this.statusInformation) {
          if (info.id === 'OEEAnalysis') info.data = response.data[0].设备效能OEE
        }
        this.drawDashboardTwo()
        this.drawDashboardThree()
      })
      this.drawDashboardTwo()
      this.drawDashboardThree()
    },
    getStoreTypeNam(type) {
      let name = '未知'
      switch (type) {
        case 0:
          name = '无'
          break
        case 1:
          name = '瓶'
          break
        case 2:
          name = '纸'
          break
        case 3:
          name = '线'
          break
        case 4:
          name = '砂'
          break
        case 5:
          name = '塞'
          break
      }
      return name
    },
    searchChartData2() {
      // var param4 = []
      // this.averData = 0
      // var Data4 = this.CreateData('11', '生产看板_日产量曲线_查询', param4)
      // this.ExecDatabase(Data4).then(response => {
      //   for (let i = 0; i < response.data.length; i++) {
      //     this.myChart4X[i] = response.data[i].date.substring(response.data[i].date.length - 5, response.data[i].date.length)
      //     this.myChart4Y[i] = response.data[i].num
      //     this.averData += response.data[i].num
      //   }
      //   this.averData = parseInt(this.averData)
      //   this.drawDailyOutput()
      // })
    },
    searchChartChinaData() {
      this.setChinaEcharts()
    },
    setChinaEcharts() {
      this.chinaEcharts.setOption({
        backgroundColor: 'transparent', // 背景色
        tooltip: {
          trigger: 'item',
          show: true,
          textStyle: {
            fontSize: 30
          },
          formatter: function (params) {
            // console.log(params);
            const str = `${params.name}，共计${params.data.count}套<br />`
            // params.data.departmentnames.forEach((item) => {
            //   str += `${item}<br />`
            // })
            return str
          }
        },
        geo: { // 地理坐标系组件   地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制
          map: 'china', // 地图类型  这儿展示的是中国地图
          aspectScale: 0.85,
          selectedMode: 'single', // 开启单选
          center: [105, 35], // 设置地图中心点，这里的坐标是地图中心位置的经纬度
          zoom: 2, // 设置地图的缩放级别，数值越大地图放大程度越高
          label: {
            show: true, // 是否显示标签  此处指是否显示地图上的地区名字
            color: '#ffffff',
            fontSize: 10
          },
          roam: true, // 是否开启鼠标缩放和平移漫游
          itemStyle: {
            // 设置地图板块的发光效果
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(83, 114, 199, 0.8)' // 浅蓝色，不透明度0.8
              },
              {
                offset: 1,
                color: 'rgba(83, 114, 199, 0.3)' // 淡蓝色，不透明度0.3
              }
            ]),
            borderColor: 'rgba(65, 205, 247, 1)', // 浅蓝色边框
            shadowColor: 'rgba(65, 205, 247, 0.7)', // 淡蓝色阴影
            shadowBlur: 40, // 阴影模糊大小
            shadowOffsetX: 0,
            shadowOffsetY: 0
          },
          emphasis: {
            itemStyle: {
              areaColor: 'rgba(135, 206, 250, 0.7)', // 鼠标悬浮时的颜色
              shadowBlur: 50, // 鼠标悬浮时阴影模糊大小
              shadowColor: 'rgba(135, 206, 250, 0.7)' // 鼠标悬浮时阴影颜色
            }
          }
        },
        series: [{
          type: 'effectScatter',
          coordinateSystem: 'geo',
          showEffectOn: 'render',
          data: this.chinaMapCityList,
          rippleEffect: {
            brushType: 'stroke',
            scale: 5,
            period: 2 // 秒数
          },
          symbolSize: 16,
          clickable: false,
          hoverAnimation: true,
          zlevel: 1,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true,
              textStyle: {
                fontSize: 16 // 默认字体大小
              }
            },
            // 高亮状态下的文字样式
            emphasis: {
              textStyle: {
                fontSize: 20 // 高亮状态下的字体大小
              }
            }
          },
          // ...其他配置
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#f56321' },
              { offset: 1, color: '#eeb804' }
            ]),
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10
          }
        }
        ]
      })
    },
    // 7日报警
    searchChartData3() {
      var param4 = []
      var Data4 = this.CreateData('11', '生产看板_日报警曲线_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.myChart4X1[i] = response.data[i].date.substring(response.data[i].date.length - 5, response.data[i].date.length)
          this.myChart4Y1[i] = response.data[i].num
        }
        this.drawLine4()
      })
    },
    // 报警信息查询
    searchChartData4() {
      var param4 = []
      var Data4 = this.CreateData('11', '生产看板_报警信息_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        if (response.data.length !== 0) {
          this.tableData = response.data
          this.$refs.seamlessScroll.reset()
        }
      })
    },
    initMqtt() {
      const scope = this
      const connection = {
        host: mqttIp,
        port: mqttPort,
        endpoint: '/mqtt',
        clean: true, // 保留会话
        connectTimeout: 4000, // 超时时间
        reconnectPeriod: 4000, // 重连时间间隔
        // 认证信息
        clientId: 'mqttjs_3be2c321' + new Date().getTime(), // 同一个ID 无法二次连接
        username: 'DT_WEB1',
        password: ''
      }
      const subscription = {
        topic: opname,
        qos: 0
      }
      const { host, port, endpoint, ...options } = connection
      const connectUrl = `ws://${host}:${port}${endpoint}`
      try {
        this.mqttClient = mqtt.connect(connectUrl, options)
      } catch (error) {
        console.log('MQTT connect error', error)
      }

      this.mqttClient.on('connect', () => {
        this.$message.success('加载完成，连接MQTT服务器成功！')
        console.log('MQTT Connection succeeded!')
        const { topic, qos } = subscription
        this.mqttClient.subscribe(topic, { qos }, (error, res) => {
          if (error) {
            console.log('Subscribe to topics error', error)
          }
        })
      })
      this.mqttClient.on('error', error => {
        console.log('MQTT Connection failed', error)
        try {
          scope.$message.error('MQTT服务器连接失败')
          if (scope.IsAllowConnect) {
            // 显示一下
            scope.$message.warning('重新连接MQTT服务器')
            console.log('重新连接MQTT服务器')
            // 重新连接,打开计时器
            setTimeout(function () {
              scope.initMqtt()
            }, 5000)
          }
        } catch (exception) {
          const error = exception.toString()
          scope.$message.error('MQTT服务器出现错误,关闭连接' + error)
        }
      })
      // 接收消息
      this.mqttClient.on('message', (topic, message) => {
        try {
          scope.websocketonmessage({ data: message.toString() })
        } catch (exception) {
          console.log(exception.toString())
        }
      })
      // 模拟接收消息
      // setInterval(() => {
      //   // this.websocketonmessage({ data: 'DT|C_B_DeviceInfo|[{"Name":"CUT","Id":"cfc74901-f68e-45e2-8735-8c07b5fd8a3f","Status":"中断","Program":"D:\\\\USER\\\\18126-P03-P10.MJB","Feed":null,"Speed":null,"Rapid":null,"ProgramStatus":null,"Tool":null,"Axis":[{"AxisName":"X","AxisValue":"0"},{"AxisName":"Y","AxisValue":"0"},{"AxisName":"Z","AxisValue":"60.7"},{"AxisName":"U","AxisValue":"0"},{"AxisName":"V","AxisValue":"0"}],"OtherParameter":[{"ParameterName":"当前钢丝架文件的名称","ParameterValue":"AC BRASS 900 0.250"},{"ParameterName":"当前选择的线径","ParameterValue":"0.25"},{"ParameterName":"电极丝特性","ParameterValue":"-841100"},{"ParameterName":"电极丝速度","ParameterValue":"8.2"},{"ParameterName":"发电机接通时间","ParameterValue":"697"},{"ParameterName":"总执行时间","ParameterValue":"817"},{"ParameterName":"机床接通的总时间","ParameterValue":"30704238"},{"ParameterName":"加工时电极丝速度","ParameterValue":"0"},{"ParameterName":"上喷射压力","ParameterValue":"0.2"},{"ParameterName":"下喷射压力","ParameterValue":"0.1"},{"ParameterName":"过滤器中的压力","ParameterValue":"1.1"}],"Alarm":[{"Alarm":"?????","AlarmTime":"2023-06-08 09:12:39 851"}]}]' })
      //   // this.websocketonmessage({ data: 'DT|C_B_DeviceInfo|[{"Name":"FORM","Id":"cfc74901-f68e-45e2-8735-8c07b5fd8a3f","Status":"ACTIVE","Program":"wdawda46d65a","Feed":"22","Speed":"33","Rapid":"44","ProgramStatus":null,"Tool":null,"Axis":[{"AxisName":"Xact","AxisValue":"10.5231"},{"AxisName":"Yact","AxisValue":"12.1368"},{"AxisName":"Zact","AxisValue":"35.8"},{"AxisName":"Uact","AxisValue":"0"},{"AxisName":"Vact","AxisValue":"0.0008"}],"OtherParameter":[{"ParameterName":"programnumber","ParameterValue":"SHAPE_SKIMMINGUNTILREMNANT2_CUT2"},{"ParameterName":"wirename","ParameterValue":"AC BRASS 900 0.250"},{"ParameterName":"wirediam","ParameterValue":"0.25"},{"ParameterName":"wireleftlength","ParameterValue":"-824956"},{"ParameterName":"wirespeed","ParameterValue":"8"},{"ParameterName":"sequence","ParameterValue":"GEO 8"},{"ParameterName":"sequencepass","ParameterValue":"3"},{"ParameterName":"genontime","ParameterValue":"4095"},{"ParameterName":"executiontime","ParameterValue":"4313"},{"ParameterName":"machinecounter","ParameterValue":"30503331"},{"ParameterName":"machineerosioncounter","ParameterValue":"12426498"},{"ParameterName":"machiningspeedmax","ParameterValue":"2.99"},{"ParameterName":"machiningspeedmin","ParameterValue":"2.32"},{"ParameterName":"machiningspeed","ParameterValue":"2.62"},{"ParameterName":"deio","ParameterValue":"9.7"},{"ParameterName":"temperature","ParameterValue":"21.9"},{"ParameterName":"pressureupper","ParameterValue":"0.3"},{"ParameterName":"pressurelower","ParameterValue":"0.1"},{"ParameterName":"pressurefilter","ParameterValue":"1.3"},{"ParameterName":"cuttinglength","ParameterValue":"24.2675"},{"ParameterName":"meanmachvoltage","ParameterValue":"30.0"},{"ParameterName":"wiretension","ParameterValue":"4.9"},{"ParameterName":"good","ParameterValue":"0.831"},{"ParameterName":"shortcircuit","ParameterValue":"0.150"},{"ParameterName":"arckill","ParameterValue":"0.019"},{"ParameterName":"cold","ParameterValue":"0.000"},{"ParameterName":"frequency","ParameterValue":"34990"},{"ParameterName":"timeTD","ParameterValue":"0.014"},{"ParameterName":"shc_warningnumber","ParameterValue":"56"},{"ParameterName":"shc_warningtime","ParameterValue":"45592"},{"ParameterName":"shc_longnumber","ParameterValue":"52"},{"ParameterName":"shc_longtime","ParameterValue":"45316"},{"ParameterName":"shc_time","ParameterValue":"45528"}]}]' })
      //   // this.websocketonmessage({ data: 'DT|C_B_DeviceInfo|[{"Name":"98","Id":"cfc74901-f68e-45e2-8735-8c07b5fd8a3f","Status":"ACTIVE","Program":null,"Feed":"22","Speed":"33","Rapid":"44","ProgramStatus":null,"Tool":null,"Axis":[{"AxisName":"Xact","AxisValue":"10.5231"},{"AxisName":"Yact","AxisValue":"12.1368"},{"AxisName":"Zact","AxisValue":"35.8"},{"AxisName":"Uact","AxisValue":"0"},{"AxisName":"Vact","AxisValue":"0.0008"}],"OtherParameter":[{"ParameterName":"programnumber","ParameterValue":"SHAPE_SKIMMINGUNTILREMNANT2_CUT2"},{"ParameterName":"wirename","ParameterValue":"AC BRASS 900 0.250"},{"ParameterName":"wirediam","ParameterValue":"0.25"},{"ParameterName":"wireleftlength","ParameterValue":"-824956"},{"ParameterName":"wirespeed","ParameterValue":"8"},{"ParameterName":"sequence","ParameterValue":"GEO 8"},{"ParameterName":"sequencepass","ParameterValue":"3"},{"ParameterName":"genontime","ParameterValue":"4095"},{"ParameterName":"executiontime","ParameterValue":"4313"},{"ParameterName":"machinecounter","ParameterValue":"30503331"},{"ParameterName":"machineerosioncounter","ParameterValue":"12426498"},{"ParameterName":"machiningspeedmax","ParameterValue":"2.99"},{"ParameterName":"machiningspeedmin","ParameterValue":"2.32"},{"ParameterName":"machiningspeed","ParameterValue":"2.62"},{"ParameterName":"deio","ParameterValue":"9.7"},{"ParameterName":"temperature","ParameterValue":"21.9"},{"ParameterName":"pressureupper","ParameterValue":"0.3"},{"ParameterName":"pressurelower","ParameterValue":"0.1"},{"ParameterName":"pressurefilter","ParameterValue":"1.3"},{"ParameterName":"cuttinglength","ParameterValue":"24.2675"},{"ParameterName":"meanmachvoltage","ParameterValue":"30.0"},{"ParameterName":"wiretension","ParameterValue":"4.9"},{"ParameterName":"good","ParameterValue":"0.831"},{"ParameterName":"shortcircuit","ParameterValue":"0.150"},{"ParameterName":"arckill","ParameterValue":"0.019"},{"ParameterName":"cold","ParameterValue":"0.000"},{"ParameterName":"frequency","ParameterValue":"34990"},{"ParameterName":"timeTD","ParameterValue":"0.014"},{"ParameterName":"shc_warningnumber","ParameterValue":"56"},{"ParameterName":"shc_warningtime","ParameterValue":"45592"},{"ParameterName":"shc_longnumber","ParameterValue":"52"},{"ParameterName":"shc_longtime","ParameterValue":"45316"},{"ParameterName":"shc_time","ParameterValue":"45528"}]}]' })
      //   this.websocketonmessage({ data: 'DT|C_B_DeviceInfo_Slow|{"produce_task_no":"0","agv_from_loc":"1_10_3","agv_to_loc":"9_1_3","lib":[{"lib_loc_no":"1","lib_content":"1"},{"lib_loc_no":"2","lib_content":"1"},{"lib_loc_no":"3","lib_content":"1"},{"lib_loc_no":"4","lib_content":"0"},{"lib_loc_no":"5","lib_content":"0"},{"lib_loc_no":"6","lib_content":"0"},{"lib_loc_no":"7","lib_content":"0"},{"lib_loc_no":"8","lib_content":"0"},{"lib_loc_no":"9","lib_content":"0"},{"lib_loc_no":"10","lib_content":"0"},{"lib_loc_no":"11","lib_content":"0"},{"lib_loc_no":"12","lib_content":"0"},{"lib_loc_no":"13","lib_content":"0"},{"lib_loc_no":"14","lib_content":"0"},{"lib_loc_no":"15","lib_content":"0"},{"lib_loc_no":"16","lib_content":"0"},{"lib_loc_no":"17","lib_content":"0"},{"lib_loc_no":"18","lib_content":"0"},{"lib_loc_no":"19","lib_content":"0"},{"lib_loc_no":"20","lib_content":"0"},{"lib_loc_no":"21","lib_content":"0"},{"lib_loc_no":"22","lib_content":"0"},{"lib_loc_no":"23","lib_content":"0"},{"lib_loc_no":"24","lib_content":"0"},{"lib_loc_no":"25","lib_content":"0"},{"lib_loc_no":"26","lib_content":"0"},{"lib_loc_no":"27","lib_content":"0"},{"lib_loc_no":"28","lib_content":"0"},{"lib_loc_no":"29","lib_content":"0"},{"lib_loc_no":"30","lib_content":"0"},{"lib_loc_no":"31","lib_content":"0"},{"lib_loc_no":"32","lib_content":"0"},{"lib_loc_no":"33","lib_content":"0"},{"lib_loc_no":"34","lib_content":"0"},{"lib_loc_no":"35","lib_content":"0"},{"lib_loc_no":"36","lib_content":"0"}]}' })
      //   // this.websocketonmessage({ data: 'DT|C_B_DeviceInfo|[{"Name":"FANUC","Id":"cfc74901-f68e-45e2-8735-8c07b5fd8a3f","Status":"ACTIVE","Program":null,"Feed":"22","Speed":"33","Rapid":"44","ProgramStatus":null,"Tool":null,"Axis":[{"AxisName":"Xact","AxisValue":"10.5231"},{"AxisName":"Yact","AxisValue":"12.1368"},{"AxisName":"Zact","AxisValue":"35.8"},{"AxisName":"Uact","AxisValue":"0"},{"AxisName":"Vact","AxisValue":"0.0008"}],"OtherParameter":[{"ParameterName":"programnumber","ParameterValue":"SHAPE_SKIMMINGUNTILREMNANT2_CUT2"},{"ParameterName":"wirename","ParameterValue":"AC BRASS 900 0.250"},{"ParameterName":"wirediam","ParameterValue":"0.25"},{"ParameterName":"wireleftlength","ParameterValue":"-824956"},{"ParameterName":"wirespeed","ParameterValue":"8"},{"ParameterName":"sequence","ParameterValue":"GEO 8"},{"ParameterName":"sequencepass","ParameterValue":"3"},{"ParameterName":"genontime","ParameterValue":"4095"},{"ParameterName":"executiontime","ParameterValue":"4313"},{"ParameterName":"machinecounter","ParameterValue":"30503331"},{"ParameterName":"machineerosioncounter","ParameterValue":"12426498"},{"ParameterName":"machiningspeedmax","ParameterValue":"2.99"},{"ParameterName":"machiningspeedmin","ParameterValue":"2.32"},{"ParameterName":"machiningspeed","ParameterValue":"2.62"},{"ParameterName":"deio","ParameterValue":"9.7"},{"ParameterName":"temperature","ParameterValue":"21.9"},{"ParameterName":"pressureupper","ParameterValue":"0.3"},{"ParameterName":"pressurelower","ParameterValue":"0.1"},{"ParameterName":"pressurefilter","ParameterValue":"1.3"},{"ParameterName":"cuttinglength","ParameterValue":"24.2675"},{"ParameterName":"meanmachvoltage","ParameterValue":"30.0"},{"ParameterName":"wiretension","ParameterValue":"4.9"},{"ParameterName":"good","ParameterValue":"0.831"},{"ParameterName":"shortcircuit","ParameterValue":"0.150"},{"ParameterName":"arckill","ParameterValue":"0.019"},{"ParameterName":"cold","ParameterValue":"0.000"},{"ParameterName":"frequency","ParameterValue":"34990"},{"ParameterName":"timeTD","ParameterValue":"0.014"},{"ParameterName":"shc_warningnumber","ParameterValue":"56"},{"ParameterName":"shc_warningtime","ParameterValue":"45592"},{"ParameterName":"shc_longnumber","ParameterValue":"52"},{"ParameterName":"shc_longtime","ParameterValue":"45316"},{"ParameterName":"shc_time","ParameterValue":"45528"}]}]' })
      //   console.log('mqtt发送了一条数据')
      // }, 3000)
    },

    websocketonmessage(msg) { // 数据接收
      this.msg = msg
      // 返回的数据msg.data，包含了协议中的4部分9
      // TOBS??SCADADetailed?MES|Current|opName|电流^电压
      var arrays_signal = msg.data.split('|')
      var interFaceType = arrays_signal[0]
      var dataType = arrays_signal[1]
      var m_data = arrays_signal[2]
      switch (interFaceType) {
        case 'DT':
          switch (dataType) {
            case 'C_B_DeviceInfo_Slow': {
              {
                // console.log('S_data0', m_data)
                const S_data = JSON.parse(m_data)
                console.log('S_data', S_data)
                this.AGVData.start = S_data.agv_from_loc
                this.AGVData.end = S_data.agv_to_loc
                this.AGVData.workTask = S_data.produce_task_no

                // this.statusInformation[0].data = S_data.produce_task_no
                // this.statusInformation[1].data = S_data.agv_from_loc
                // this.statusInformation[2].data = S_data.agv_to_loc

                this.storeData.leisure = 36
                this.storeData.use = 0
                this.storeData.usageRate = 0
                S_data.lib.forEach((item) => {
                  // console.log(item)
                  // 获取行号
                  const lineNumber = Math.floor((item.lib_loc_no - 1) / 6)
                  // 获取位置号
                  const positionNumber = (item.lib_loc_no - 1) % 6
                  let whether = false
                  if (item.lib_content != '0') {
                    whether = true
                    this.storeData.use += 1
                    this.storeData.leisure -= 1
                  }

                  // console.log(lineNumber, positionNumber)
                  this.storeData.storeList[lineNumber][positionNumber].whether = whether
                })
                this.storeData.usageRate = ((this.storeData.use / 36) * 100).toFixed(0)
              }
              break
            }
            case 'C_B_TagIDTrigger': {
              const tag = JSON.parse(m_data)
              switch (tag.TagID) {
                case 'CB614A60-D0D2-4D76-96AA-FF433CAC0076': {
                  // 红
                  this.lightForm.red = tag.TagValue
                  break
                }
                case 'CB614A60-D0D2-4D76-96AA-FF433CAC0077': {
                  // 黄
                  this.lightForm.yellow = tag.TagValue
                  break
                }
                case 'CB614A60-D0D2-4D76-96AA-FF433CAC0078': {
                  this.lightForm.green = tag.TagValue
                  // 绿
                  break
                }
              }
            }
              break
          }
          break
      }
    },
    updateRobotData(ModelId, robotData) {
      switch (ModelId) {
        case 'B3FD789E-E018-4006-91AD-4824830E6557':
          for (const robotDatum of Object.keys(robotData)) {
            this.robotList[0][robotDatum] = robotData[robotDatum]
          }
          break
        case 'A769F461-4011-46A4-BBC2-2AFB39EFD9C2':
          for (const robotDatum of Object.keys(robotData)) {
            this.robotList[1][robotDatum] = robotData[robotDatum]
          }
          break
        case '04A6D8F9-7019-4C92-8845-B3CFDDF4A433':
          for (const robotDatum of Object.keys(robotData)) {
            this.robotList[2][robotDatum] = robotData[robotDatum]
          }
          break
        case 'B2BF5C42-B6ED-46D8-A7C3-046968D39805':
          for (const robotDatum of Object.keys(robotData)) {
            this.robotList[3][robotDatum] = robotData[robotDatum]
          }
          break
      }
    },
    getLogo() {
      axios.get('../../title-left.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titleLeft = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../title-right.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titleRight = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    },
    drawDashboardOne() {
      this.chartErrPieOption = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 0,
          left: 'center',
          formatter: function (name) {
            // 在这里找到对应的数据项
            let item = this.chartErrPieData.find(item => item.name === name);
            // 返回自定义的标签内容
            return item ? `${name} ${item.value}(h)` : name;
          }.bind(this),
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '40%'],
            selectedMode: 'single',
            data: this.chartErrPieData,
          }
        ]
      }
      this.chartErrPie.setOption(this.chartErrPieOption)
    },
    drawDashboardTwo() {
      this.chartDom2.setOption({
        series: [
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.3, '#ff6b6b'],
                  [0.7, '#ffa94d'],
                  [1, '#69db7c']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -5,
              length: 3,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            radius: '95%',
            splitLine: {
              distance: -5,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 8,
              fontSize: 8
            },
            detail: {
              formatter: '',
              valueAnimation: true,
              fontSize: 16,
              color: 'white',
              offsetCenter: [0, '100%']
            },
            data: [
              {
                value: this.timeRate
              }
            ]
          }
        ]
      })
    },
    drawDashboardThree() {
      this.chartDom3.setOption({
        series: [
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.3, '#ff6b6b'],
                  [0.7, '#ffa94d'],
                  [1, '#69db7c']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -5,
              length: 3,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            radius: '95%',
            splitLine: {
              distance: -5,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 8,
              fontSize: 8
            },
            detail: {
              formatter: '',
              valueAnimation: true,
              fontSize: 16,
              color: 'white',
              offsetCenter: [0, '100%']
            },
            data: [
              {
                value: this.performanceRate
              }
            ]
          }
        ]
      })
    },
    drawDailyOutput() {
      this.chartColumnarOption = {
        legend: {
          top: '0%',
          right: '5%', // 将图例放置在右侧
          icon: 'circle', // 设置图例的标识样式为实心圆点
          itemWidth: 10, // 设置图例标记的宽度
          itemHeight: 10, // 设置图例标记的高度
          textStyle: {
            fontSize: 20,
            color: function (params) {
              // 获取对应的系列项
              var series = option.series[0].data
              for (var i = 0; i < series.length; i++) {
                if (series[i].name === params) {
                  // 返回对应系列项的颜色
                  return series[i].itemStyle.color
                }
              }
              return '#000' // 默认颜色，如果没有匹配到
            }
          }
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '10%'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: this.chartColumnarX, // ['1T240211-1', '1T240211-2', '1T240211-3', '1T240211-4'],
          axisLabel: {
            interval: 0, // 显示所有标签
            fontSize: 18, // 设置x轴文字的大小
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed', // 分隔线类型设置为虚线
              color: '#9f9f9f'
            }
          },
          axisLabel: {
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true
          }
        },
        series: [
          {
            name: '设备总数',
            data: this.chartColumnarYData1, // [40, 22, 47, 39],
            type: 'bar',
            itemStyle: { color: '#81d3f8' },
            barWidth: 15,
            barCategoryGap: '30'
          },
          {
            name: '正常运行数',
            data: this.chartColumnarYData2, // [21, 45, 32, 46],
            type: 'bar',
            itemStyle: { color: '#479867' },
            barWidth: 15,
            barCategoryGap: '30'
          },
          {
            name: '在线数',
            data: this.chartColumnarYData3, // [21, 45, 32, 46],
            type: 'bar',
            smooth: true,
            itemStyle: { color: '#e6ad00' },
            barWidth: 15,
            barCategoryGap: '30'
          },
          {
            name: '离线数',
            data: this.chartColumnarYData4, // [21, 45, 32, 46],
            type: 'bar',
            smooth: true,
            itemStyle: { color: '#ec808d' },
            barWidth: 15,
            barCategoryGap: '30'
          },
          {
            name: '实时报警数',
            data: this.chartColumnarYData5, // [21, 45, 32, 46],
            type: 'bar',
            smooth: true,
            itemStyle: { color: '#8253a7' },
            barWidth: 15,
            barCategoryGap: '30'
          }
        ]
      }
      this.chartColumnar.setOption(this.chartColumnarOption)
    },
    openVoid() {
      window.location.href = window.dt_Config.openMonitorUrl
    },
    searchFaultTypeName() {
      this.alarmTypes = {}
      var param4 = []
      param4[0] = ['AlarmTypeName', '']
      var Data4 = this.CreateData('11', '基础数据_报警类型设定_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.alarmTypes['AlarmTypeCode_' + response.data[i].AlarmTypeCode] = response.data[i].AlarmTypeName
        }
        this.searchFaultType()
      })
    },
    searchFaultType() {
      var param4 = []
      var Data4 = this.CreateData('11', '生产看板_故障类型分布_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        this.myChart4Alarm1 = []
        for (let i = 0; i < response.data.length; i++) {
          this.myChart4Alarm1.push({
            name: response.data[i].AlarmTypeName,
            value: response.data[i].AlarmCount,
            code: 'AlarmTypeCode_' + response.data[i].AlarmTypeCode
          })
        }

        for (const info in this.alarmTypes) {
          if (this.myChart4Alarm1.filter(res => res.code === info).length === 0) {
            this.myChart4Alarm1.push({
              name: this.alarmTypes[info],
              value: 0,
              code: info
            })
          }
        }
        this.drawFaultType()
      })
    },
    drawFaultType() {
      var scope = this
      this.chartDom5.setOption({
        color: ['#38b3f1'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        textStyle: {
          color: '#ccc'
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: window.g.spcTitleList,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: 'SPC',
          type: 'line',
          barWidth: '60%',
          data: window.g.spcDataList,
          markLine: {
            data: window.g.spcData,
            label: {
              normal: {
                formatter: '{b} : {c}',
                position: 'middle'
              }
            }
          }
        }]
      })
    },
    searchRunStartChart() {
      // var param4 = []
      // var Data4 = this.CreateData('11', '生产看板_类别故障时长_查询', param4)
      // this.ExecDatabase(Data4).then(response => {
      //   this.myChart4Alarm2 = []
      //   for (let i = 0; i < response.data.length; i++) {
      //     this.myChart4Alarm2.push({
      //       name: response.data[i].AlarmTypeName,
      //       value: Math.floor(parseFloat(response.data[i].AlarmSum) / 3600 * 100) / 100,
      //       code: 'AlarmTypeCode_' + response.data[i].AlarmTypeCode
      //     })
      //   }
      //
      //   for (const info in this.alarmTypes) {
      //     if (this.myChart4Alarm2.filter(res => res.code === info).length === 0) {
      //       this.myChart4Alarm2.push({
      //         name: this.alarmTypes[info],
      //         value: 0,
      //         code: info
      //       })
      //     }
      //   }
      //   this.drawFaultTime()
      // })
    },
    searchFaultTime() {
      var param4 = []
      var Data4 = this.CreateData('11', '生产看板_类别故障时长_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        this.myChart4Alarm2 = []
        for (let i = 0; i < response.data.length; i++) {
          this.myChart4Alarm2.push({
            name: response.data[i].AlarmTypeName,
            value: Math.floor(parseFloat(response.data[i].AlarmSum) / 3600 * 100) / 100,
            code: 'AlarmTypeCode_' + response.data[i].AlarmTypeCode
          })
        }

        for (const info in this.alarmTypes) {
          if (this.myChart4Alarm2.filter(res => res.code === info).length === 0) {
            this.myChart4Alarm2.push({
              name: this.alarmTypes[info],
              value: 0,
              code: info
            })
          }
        }
        this.drawFaultTime()
      })
    },
    drawRunStartChart() {
      this.chartDom8.setOption({
        tooltip: {
          trigger: 'item',
          color: '#fff'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            // 图例中文字的样式
            color: '#ffffff',
            fontSize: 12
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '70%',
            data: window.g.runStartChart,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    drawFaultTime() {
      this.chartDom6.setOption({
        color: ['#fc0000', '#ff7d4e'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['极差控制图', '均值控制图'],
          textStyle: {// 图例文字的样式
            color: '#ccc',
            fontSize: 16
          }
        },
        textStyle: {
          color: '#ccc'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: window.g.jXData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '极差控制图',
            type: 'line',
            data: window.g.jYData1,
            itemStyle: {
              normal: {
                color: '#cccccc',
                lineStyle: {
                  color: '#fc0000'
                }
              }
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '均值控制图',
            type: 'line',
            data: window.g.jYData2,
            itemStyle: {
              normal: {
                color: '#cccccc',
                lineStyle: {
                  color: '#ff7d4e'
                }
              }
            },
            markPoint: {
              data: [
                { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }

              ]
            }
          }
        ]
      })
    },
    // 工序能力分析
    drawLine4() {
      this.chartDom7.setOption({
        title: {
          subtext: 'Cp=1.25,Cpk=1.68',
          x: 'center',
          color: '#fff'
        },
        textStyle: {
          color: '#fff'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#fff'
            }
          }
        },
        xAxis: [
          {
            type: 'value',
            min: 0,
            max: 20,
            interval: 2
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 0.25,
            interval: 50,
            axisLabel: {
              formatter: '{value} '
            }
          },
          {
            type: 'value',
            name: '',
            min: 0,
            max: 0.25,
            interval: 50,
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barCategoryGap: '30%',
            markLine: {
              data: window.g.gData2,
              symbol: 'pin',
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'middle'
                }
              },
              itemStyle: {
                normal: {
                  color: '#fff'
                }
              }
            },
            data: window.g.gData
          },
          {
            type: 'line',
            yAxisIndex: 1,
            markLine: {
              data: window.g.gData2,
              symbol: 'pin',
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'middle'
                }
              },
              lineStyle: {
                normal: {
                  type: 'dotted',
                  color: '#fff'
                }
              }
            },
            data: window.g.gData3
          }
        ]
      })
    },
    // 编辑生产计划
    showPlanPage(id) {
      for (const info of this.statusInformation) {
        if (id === 'ProductionPlan' && info.id === 'ProductionPlan') {
          this.dialogFormVisible1 = true
          this.form.planData = info.data
        }
      }
    },
    // 确认编辑生产计划
    submitAdd1() {
      var param = []
      param[0] = ['计划产量', this.form.planData]
      var Data = this.CreateData('12', '基础数据_生产计划_编辑', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('编辑成功')
          this.searchChartData1()
          this.dialogFormVisible1 = false
        } else {
          this.$message.error('编辑失败')
        }
      })
    },
    callOff1() {
      this.dialogFormVisible1 = false
    },
    changeCameraState(state) {
      if (this.isShow1 === state) return
      this.isShow = state ? 'inline' : 'none'
      this.isShow1 = state
    },
    restView() {
      const data = {
        type: 'restView',
        data: {}
      }
      this.$refs.dmtComIframe.contentWindow.postMessage(data, '*')
    },
    clickModel(object, position) {
      // if (object) {
      //   $('#robotrrrr').css({ display: 'inline' })
      //   $('#robotrrrr').css(position)
      //   $('#robotrrrr').text(object.userData.name)
      // } else {
      //   $('#robotrrrr').css({ display: 'none' })
      // }
    },
    solveDisPlay() {
      if (this.isShow1) {
        this.isShow = 'inline'
        this.isShow1 = true
      } else {
        this.isShow = 'none'
        this.isShow1 = false
      }
    }
    // // 自动增长
    // AutoGo() {
    //   if (this.flag === 0) {
    //     this.PageCurrent = 1
    //     this.searchChartData4()
    //   } else {
    //     if (this.PageCurrent >= this.PageCount) {
    //       this.PageCurrent = 1
    //     } else {
    //       this.PageCurrent += 1
    //     }
    //     this.searchChartData4()
    //   }
    // },
    // // 分页查询
    // handleCurrentChange(val) {
    //   clearInterval(this.timer_4)
    //   this.PageCurrent = val
    //   this.searchTable()
    //   this.timer_4 = setInterval(this.init, this.updateTime)
    // }
  }
}
</script>
<style lang="scss" scoped="scoped">
* {
  font-family: "Microsoft YaHei", sans-serif;
}

HTML {
  overflow: auto;
}

body {
  margin: 0;
  padding: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  position: relative;
  font-family: MiSans Bold, serif;
}

/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px;
  /*对垂直流动条有效*/
  height: 5px;
  /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: rgb(14, 50, 97);
  /*background-color: #ffffff;*/
  border-radius: 2px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: rgb(10, 35, 82);
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
  display: none;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
  background: #dedede;
}
</style>
<style scoped="scoped">
#body {
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}

.background {
  width: 1920px;
  height: 1080px;
  background-color: #0a1936;
  color: white;
  background-size: 100%;
  z-index: 99999;
}

.data-box {
  position: absolute;
  width: 400px;
  height: 310px;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  //box-shadow: inset 0 0 30px rgb(24, 78, 135);
  //background-color: rgba(8, 31, 72, 1);
  border: 1px solid #3c73ba;
}

.boxBorder {
  position: absolute;
  padding: 10px;
  border-style: solid;
  border-color: rgb(71, 209, 226);
}

.borderLeft1 {
  border-width: 2px 0 0 2px;
  top: -2px;
  left: -2px;
}

.borderLeft2 {
  border-width: 2px 2px 0 0;
  top: -2px;
  right: -2px;
}

.borderRight1 {
  border-width: 0 0 2px 2px;
  bottom: -2px;
  left: -2px;
}

.borderRight2 {
  border-width: 0 2px 2px 0;
  bottom: -2px;
  right: -2px;
}

.indicatorText {
  margin-top: 5px;
  font-weight: 700;
  background-color: #0a1936;
  width: 100%;
  color: #fff !important;
  font-size: 21px;
  text-align: left;

  .data-title-left {
    float: left;
    width: 40px;
    height: 15px;
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #036be9;
    margin: 6px 10px 0 20px;
  }

  span {
    margin: 0 15px;
  }
}

.planTable {
  height: 300px;
  overflow: auto;

  tr {
    height: 45px;
  }

  td {
    border: 0px solid;
    color: #fff
  }

}

/*下拉背景透明*/
::v-deep .el-select {
  background-color: transparent;
  color: #fff;
}


::v-deep .el-select .el-input__inner {
  background-color: transparent;
  color: #fff;
}

@font-face {
  font-family: title-font;
  src: url("/public/庞门正道标题体.ttf");
}

#htmlTitleImg {
  display: flex;
  justify-content: center;
  font-family: "Microsoft YaHei", sans-serif;
  color: rgb(168, 202, 238);
  position: fixed;
  top: 0;
  left: 0;
  font-size: 45px;
  text-align: center;
  height: 80px;
  line-height: 60px;
  letter-spacing: 5px;
  font-weight: 700;
  margin-left: 430px;
  background: -webkit-linear-gradient(top, #fff, #65c4f1);
  /* 背景色渐变 */
  -webkit-background-clip: text;
  /* 规定背景的划分区域 */
  -webkit-text-fill-color: transparent;
  /* 防止字体颜色覆盖 */

  .title-left img {
    position: relative;
    top: 7px;
    width: 200px;
    height: 70px;
  }
}

.cityItemList {
  margin-top: 30px;
  margin-left: 20px;

  .item {
    display: flex;
    font-weight: bold;
    margin: 10px 0;
    line-height: 30px;
    font-size: 18px;

    .itemIndex {
      width: 30px;
      height: 30px;
      color: #fff;
      text-align: center;
    }

    .name {
      width: 60px;
      color: #0d8ea7;
      margin: 0 10px;
    }

    .value {
      width: 300px;

      .right-to-left-progress {
        width: 200px;
      }
    }
  }
}

.errItemList {
  margin-top: 30px;

  .item {
    display: flex;
    font-weight: bold;
    margin: 10px 0;
    line-height: 30px;
    font-size: 18px;

    .name {
      width: 300px;
      color: #fff;
      margin: 0 10px;
      font-size: 13px;
    }

    .value {
      width: 300px;
      padding-right: 10px;
    }
  }
}

#chinaEcharts {
  width: 1061px;
  height: 552px;
  position: fixed;
  top: 110px;
  left: 430px;
}

::v-deep .el-progress {
  margin-top: 5px;
}

::v-deep .el-progress-bar__innerText {
  position: relative;
  left: 40px;
  font-size: 15px;
}

::v-deep .el-progress-bar__outer {
  background-color: transparent;
}

.right-to-left-progress {
  transform: scaleX(-1);
}

::v-deep .right-to-left-progress .el-progress__text {
  transform: scaleX(-1);
  font-size: 15px !important;
  //left: 0px;
  //top: -3px;
  color: #fff;
}

.openVoid {
  border-radius: 20px;
  border: 4px solid #1f3f83;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  background-color: rgba(0, 0, 0, .0);
  height: 50px;
  width: 150px;
  position: fixed;
  top: 20px;
  right: 100px;
  z-index: 99999999;
}

#CameraImg {
  height: 755px;
  width: 1670px;
  background-image: url("/static/CameraImg.png");
  background-size: 100% 100%;
}

.selectItemOneBox {
  display: flex;
  margin-top: 20px;
  justify-content: space-around;
}

::v-deep .el-tag.el-tag--info {
  background-color: rgba(0, 0, 0, .0);
  color: #fff;
}
</style>
