<template>
  <div class="testdiv">
    <!-- 看板头部 -->
    <div class="top_title">
      <span>{{ title }}</span>
      <img :src="logo" class="logo" @click="back()" />
      <div class="times_bg">{{ nowTime }}</div>
      <div class="setting">
        <img src="../../../static/images/setting.svg" @click="setting()" />
      </div>
    </div>
    <!-- 看板主体内容 -->
    <div class="container">
      <!-- 看板左侧 -->
      <div class="formBox_left">
        <div class="formBox">
          <div class="form_title">报警时长TOP5</div>
          <div class="formMain table_bg">
            <div class="canvas" id="todayAlarmTop5"></div>
          </div>
        </div>
        <div class="formBox">
          <div class="form_title">实时报警信息</div>
          <div class="formMain table_bottom">
            <ul class="table_title_bg echo_head">
              <li>工位</li>
              <li>报警内容</li>
              <li>持续时长</li>
            </ul>
            <vue-seamless-scroll
              :data="realtimeAlarmList"
              :class-option="optionSettingLeft"
              class="tbaleSlide"
            >
              <ul class="tableDetail">
                <li v-if="!realtimeAlarmList.length"></li>
                <li
                  v-else
                  class="echo_body"
                  v-for="(v, i) in realtimeAlarmList"
                  :key="'e' + i"
                >
                  <div>{{ v.station }}</div>
                  <div>{{ v.alarmContent }}</div>
                  <div>{{ v.duration }}分钟</div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="formBox">
          <div class="form_title">时间稼动率统计</div>
          <div class="formMain table_bg">
            <div class="canvas" id="timeEfficiency"></div>
          </div>
        </div>
      </div>
      <!-- 看板中间 -->
      <div class="formBox_middle">
        <div class="middle_top">
          <ul>
            <li>
              <span class="echo_run">运行</span>
              <div>{{ deviceStatusSummaryData.runNum }}</div>
            </li>
            <li>
              <span class="echo_debug">调试</span>
              <div>{{ deviceStatusSummaryData.debugNum }}</div>
            </li>
            <li>
              <span class="echo_free">空闲</span>
              <div>{{ deviceStatusSummaryData.freeNum }}</div>
            </li>
            <li>
              <span class="echo_error">报警</span>
              <div>{{ deviceStatusSummaryData.errorNum }}</div>
            </li>
            <li>
              <span class="echo_close">关机</span>
              <div>{{ deviceStatusSummaryData.closeNum }}</div>
            </li>
          </ul>
        </div>
        <div class="middle_img">
          <img src="../../../static/images/deviceStatus.png" />
          <div
            class="lamp"
            v-for="(v, i) in deviceRealTimeStatusList"
            :key="'c' + i"
            :style="{ left: v.x + 'px', top: v.y + 'px' }"
            @click.stop="openLampWin(v)"
          >
            <div v-if="v.type == 1">
              <img
                v-if="v.status == 1"
                src="../../../static/dashboardImg/run.png"
              />
              <img
                v-if="v.status == 2"
                src="../../../static/dashboardImg/debug.png"
              />
              <img
                v-if="v.status == 3"
                src="../../../static/dashboardImg/free.png"
              />
              <img
                v-if="v.status == 4"
                src="../../../static/dashboardImg/error.png"
              />
              <img
                v-if="v.status == 0"
                src="../../../static/dashboardImg/close.png"
              />
            </div>
          </div>
          <div
            class="window"
            v-for="(v, i) in deviceRealTimeStatusList"
            :key="'h' + i"
            :style="{ left: v.x + 'px', top: v.y + 'px' }"
          >
            <div v-if="v.type == 2">
              <h3 class="window_title">{{ v.station }}</h3>
              <h5>设备状态：{{ SList[v.status] }}</h5>
              <h5>持续时长：{{ v.duration }}分钟</h5>
            </div>
          </div>
          <div
            class="lampWin"
            v-if="showLampWin"
            :style="{ left: lampWinX + 'px', top: lampWinY + 'px' }"
          >
            <div class="row">
              <div class="rowL">设备编号：</div>
              <div class="rowR">{{ lampWinV.deviceNo }}</div>
            </div>
            <div class="row">
              <div class="rowL">设备名称：</div>
              <div class="rowR">{{ lampWinV.deviceName }}</div>
            </div>
            <div class="row">
              <div class="rowL">当前状态：</div>
              <div class="rowR">{{ SList[lampWinV.status] }}</div>
            </div>
            <div class="row">
              <div class="rowL">设备用途：</div>
              <div class="rowR">{{ lampWinV.devicePurpose }}</div>
            </div>
            <div class="row">
              <div class="rowL">设备报警信息：</div>
              <div class="rowR">{{ lampWinV.deviceWarn }}</div>
            </div>
            <div class="row">
              <div class="rowL">设备启动/停止：</div>
              <div class="rowR"></div>
            </div>
            <div class="rowF">
              <Button type="success" class="twoWord" @click="confirmStart()"
                >启动</Button
              >
              <Button type="error" class="twoWord" @click="confirmStop()"
                >停止</Button
              >
            </div>
          </div>
        </div>
        <div class="middle_bottom">
          <div class="formBox">
            <div class="form_title">时间稼动率TOP10</div>
            <div class="formMain table_bg">
              <div class="canvas" id="timeEfficiencyTop10"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 看板右侧 -->
      <div class="formBox_right">
        <div class="formBox echo_formBox">
          <div class="form_title">设备实时状态</div>
          <div class="formMain">
            <ul class="echo_head">
              <li>工位</li>
              <li>设备状态</li>
              <li>持续时长</li>
            </ul>
            <vue-seamless-scroll
              :data="deviceRealTimeStatusList"
              :class-option="optionSettingRight"
              class="seamless-warp tbaleSlide"
            >
              <ul class="tableDetail">
                <li v-if="!deviceRealTimeStatusList.length"></li>
                <li
                  class="echo_body"
                  v-for="(v, i) in deviceRealTimeStatusList"
                  :key="'o' + i"
                  v-else
                >
                  <div>{{ v.station }}</div>
                  <div class="deviceStatus" :style="{ color: CList[v.status] }">
                    {{ SList[v.status] }}
                  </div>
                  <div>{{ v.duration }}分钟</div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="formBox">
          <div class="form_title">设备状态分布</div>
          <div class="formMain table_bg">
            <div class="canvas" id="deviceStatusDistribute"></div>
          </div>
        </div>
      </div>
    </div>
    <Modal
      class="newModalClass deviceStatusScreenClass"
      v-model="settingModal"
      fullscreen
      class-name="vertical-center-modal"
    >
      <p slot="header">
        <span>{{ $t(960445) }}</span>
      </p>
      <div class="modal_body" style="overflow-y: scroll">
        <Collapse simple accordion>
          <Panel name="todayAlarmTop5">
            <span>今日报警时长TOP5</span>
            <div slot="content">
              <div>
                <div
                  class="groupList"
                  v-for="(v, i) in todayAlarmTop5List"
                  :key="'x' + i"
                >
                  <label>工位：</label>
                  <div
                    v-field="vFieldOptions1(v, i, 'station')"
                    class="groupItem2"
                  >
                    {{ v.station ? v.station : "请点击输入" }}
                  </div>

                  <label>持续时长：</label>
                  <div
                    v-field="vFieldOptions1(v, i, 'duration')"
                    class="groupItem2"
                  >
                    {{ v.duration ? v.duration : "请点击输入" }}
                  </div>
                  <span v-if="i == 0" class="groupBtn" @click="groupAdd1()"
                    >+</span
                  >
                  <span v-else class="groupBtn" @click="groupDel1(i)">-</span>
                </div>
              </div>
            </div>
          </Panel>
          <Panel name="realtimeAlarmList">
            <span>实时报警信息</span>
            <div slot="content">
              <div>
                <div
                  class="groupList"
                  v-for="(v, i) in realtimeAlarmList"
                  :key="'v' + i"
                >
                  <label>工位：</label>
                  <div
                    v-field="vFieldOptions2(v, i, 'station')"
                    class="groupItem3"
                  >
                    {{ v.station ? v.station : "请点击输入" }}
                  </div>
                  <label>报警内容：</label>
                  <div
                    v-field="vFieldOptions2(v, i, 'alarmContent')"
                    class="groupItem3"
                  >
                    {{ v.alarmContent ? v.alarmContent : "请点击输入" }}
                  </div>
                  <label>持续时长：</label>
                  <div
                    v-field="vFieldOptions2(v, i, 'duration')"
                    class="groupItem3"
                  >
                    {{ v.duration ? v.duration : "请点击输入" }}
                  </div>
                  <span v-if="i == 0" class="groupBtn" @click="groupAdd2()"
                    >+</span
                  >
                  <span v-else class="groupBtn" @click="groupDel2(i)">-</span>
                </div>
              </div>
            </div>
          </Panel>
          <Panel name="timeEfficiency">
            <span>时间稼动率统计</span>
            <div slot="content">
              <div>
                <div class="groupList">
                  <label>时间稼动率：</label>
                  <div
                    v-field="vFieldOptions3('timeEfficiencyV')"
                    class="groupItem2"
                  >
                    {{ timeEfficiencyV ? timeEfficiencyV : "请点击输入" }}
                  </div>
                </div>
              </div>
            </div>
          </Panel>
          <Panel name="deviceStatusSummary">
            <span>设备状态汇总</span>
            <div slot="content">
              <div>
                <div class="groupList">
                  <label>运行数量：</label>
                  <div
                    v-field="
                      vFieldOptions4('deviceStatusSummaryData', 'runNum')
                    "
                    class="groupItem2"
                  >
                    {{
                      deviceStatusSummaryData.runNum
                        ? deviceStatusSummaryData.runNum
                        : "请点击输入"
                    }}
                  </div>
                </div>
                <div class="groupList">
                  <label>调试数量：</label>
                  <div
                    v-field="
                      vFieldOptions4('deviceStatusSummaryData', 'debugNum')
                    "
                    class="groupItem2"
                  >
                    {{
                      deviceStatusSummaryData.debugNum
                        ? deviceStatusSummaryData.debugNum
                        : "请点击输入"
                    }}
                  </div>
                </div>
                <div class="groupList">
                  <label>空闲数量：</label>
                  <div
                    v-field="
                      vFieldOptions4('deviceStatusSummaryData', 'freeNum')
                    "
                    class="groupItem2"
                  >
                    {{
                      deviceStatusSummaryData.freeNum
                        ? deviceStatusSummaryData.freeNum
                        : "请点击输入"
                    }}
                  </div>
                </div>
                <div class="groupList">
                  <label>报警数量：</label>
                  <div
                    v-field="
                      vFieldOptions4('deviceStatusSummaryData', 'errorNum')
                    "
                    class="groupItem2"
                  >
                    {{
                      deviceStatusSummaryData.errorNum
                        ? deviceStatusSummaryData.errorNum
                        : "请点击输入"
                    }}
                  </div>
                </div>
                <div class="groupList">
                  <label>关机数量：</label>
                  <div
                    v-field="
                      vFieldOptions4('deviceStatusSummaryData', 'closeNum')
                    "
                    class="groupItem2"
                  >
                    {{
                      deviceStatusSummaryData.closeNum
                        ? deviceStatusSummaryData.closeNum
                        : "请点击输入"
                    }}
                  </div>
                </div>
              </div>
            </div>
          </Panel>
          <Panel name="timeEfficiencyTop10">
            <span>时间稼动率TOP10</span>
            <div slot="content">
              <div>
                <div
                  class="groupList"
                  v-for="(v, i) in timeEfficiencyTop10List"
                  :key="'c' + i"
                >
                  <label>工位：</label>
                  <div
                    v-field="vFieldOptions5(v, i, 'station')"
                    class="groupItem2"
                  >
                    {{ v.station ? v.station : "请点击输入" }}
                  </div>
                  <label>百分比：</label>
                  <div
                    v-field="vFieldOptions5(v, i, 'percent')"
                    class="groupItem2"
                  >
                    {{ v.percent ? v.percent : "请点击输入" }}
                  </div>
                  <span v-if="i == 0" class="groupBtn" @click="groupAdd3()"
                    >+</span
                  >
                  <span v-else class="groupBtn" @click="groupDel3(i)">-</span>
                </div>
              </div>
            </div>
          </Panel>
          <Panel name="deviceRealTimeStatusList">
            <span>设备实时状态</span>
            <div slot="content">
              <div>
                <div
                  class="groupList groupList6"
                  v-for="(v, i) in deviceRealTimeStatusList"
                  :key="'y' + i"
                >
                  <label>工位：</label>
                  <div class="groupItem6" style="width: 125px">
                    {{ v.station }}
                  </div>
                  <label>设备编号：</label>
                  <div class="groupItem6">{{ v.deviceNo }}</div>
                  <label>设备名称：</label>
                  <div class="groupItem6" style="width: 125px">
                    {{ v.deviceName }}
                  </div>
                  <label>设备用途：</label>
                  <div
                    v-field="vFieldOptions6(v, i, 'devicePurpose')"
                    class="groupItem6"
                  >
                    {{ v.devicePurpose ? v.devicePurpose : "请点击输入" }}
                  </div>
                  <label>设备报警信息：</label>
                  <div
                    v-field="vFieldOptions6(v, i, 'deviceWarn')"
                    class="groupItem6"
                  >
                    {{ v.deviceWarn ? v.deviceWarn : "请点击输入" }}
                  </div>
                  <label>状态：</label>
                  <Select transfer v-model="v.status" class="groupItem6">
                    <Option :value="0">关机</Option>
                    <Option :value="1">运行</Option>
                    <Option :value="2">调试</Option>
                    <Option :value="3">空闲</Option>
                    <Option :value="4">报警</Option>
                  </Select>
                  <label>横坐标：</label>
                  <div
                    v-field="vFieldOptions6(v, i, 'x')"
                    class="groupItem6"
                    style="width: 50px"
                  >
                    {{ v.x ? v.x : "请点击输入" }}
                  </div>
                  <label>纵坐标：</label>
                  <div
                    v-field="vFieldOptions6(v, i, 'y')"
                    class="groupItem6"
                    style="width: 50px"
                  >
                    {{ v.y ? v.y : "请点击输入" }}
                  </div>
                  <label>类型：</label>
                  <Select transfer v-model="v.type" class="groupItem6">
                    <Option :value="1">状态灯</Option>
                    <Option :value="2">悬浮窗</Option>
                  </Select>
                  <label>持续时长：</label>
                  <div
                    v-field="vFieldOptions6(v, i, 'duration')"
                    class="groupItem6"
                  >
                    {{ v.duration ? v.duration : "请点击输入" }}
                  </div>
                  <span v-if="i == 0" class="groupBtn" @click="groupAdd4()"
                    >+</span
                  >
                  <span v-else class="groupBtn" @click="groupDel4(i)">-</span>
                </div>
              </div>
            </div>
          </Panel>
          <Panel name="deviceStatusDistribute">
            <span>设备状态分布</span>
            <div slot="content">
              <div>
                <div class="groupList">
                  <label>运行时长：</label>
                  <div
                    v-field="
                      vFieldOptions7('deviceStatusDistributeData', 'hour2')
                    "
                    class="groupItem2"
                  >
                    {{
                      deviceStatusDistributeData.hour2
                        ? deviceStatusDistributeData.hour2
                        : "请点击输入"
                    }}
                  </div>
                </div>
                <div class="groupList">
                  <label>调试时长：</label>
                  <div
                    v-field="
                      vFieldOptions7('deviceStatusDistributeData', 'hour3')
                    "
                    class="groupItem2"
                  >
                    {{
                      deviceStatusDistributeData.hour3
                        ? deviceStatusDistributeData.hour3
                        : "请点击输入"
                    }}
                  </div>
                </div>
                <div class="groupList">
                  <label>空闲时长：</label>
                  <div
                    v-field="
                      vFieldOptions7('deviceStatusDistributeData', 'hour4')
                    "
                    class="groupItem2"
                  >
                    {{
                      deviceStatusDistributeData.hour4
                        ? deviceStatusDistributeData.hour4
                        : "请点击输入"
                    }}
                  </div>
                </div>
                <div class="groupList">
                  <label>报警时长：</label>
                  <div
                    v-field="
                      vFieldOptions7('deviceStatusDistributeData', 'hour5')
                    "
                    class="groupItem2"
                  >
                    {{
                      deviceStatusDistributeData.hour5
                        ? deviceStatusDistributeData.hour5
                        : "请点击输入"
                    }}
                  </div>
                </div>
                <div class="groupList">
                  <label>关机时长：</label>
                  <div
                    v-field="
                      vFieldOptions7('deviceStatusDistributeData', 'hour1')
                    "
                    class="groupItem2"
                  >
                    {{
                      deviceStatusDistributeData.hour1
                        ? deviceStatusDistributeData.hour1
                        : "请点击输入"
                    }}
                  </div>
                </div>
              </div>
            </div>
          </Panel>
        </Collapse>
      </div>
      <div slot="footer">
        <Button size="large" @click="settingModal = false">{{
          $t(1033)
        }}</Button>
        <Button
          :loading="isLoading"
          size="large"
          type="primary"
          @click="saveData()"
          >{{ $t(900552) }}</Button
        >
      </div>
    </Modal>
    <Modal v-model="startModal" width="360">
      <p slot="header" style="color: #19be6b; text-align: center">
        <Icon type="ios-information-circle"></Icon>
        <span>启动确认</span>
      </p>
      <div style="text-align: center">
        <p>此操作将启动该设备。</p>
        <p>是否继续启动？</p>
      </div>
      <div slot="footer">
        <Button type="success" size="large" long @click="start()">启动</Button>
      </div>
    </Modal>
    <Modal v-model="stopModal" width="360">
      <p slot="header" style="color: #ed4014; text-align: center">
        <Icon type="ios-information-circle"></Icon>
        <span>停止确认</span>
      </p>
      <div style="text-align: center">
        <p>此操作将停止该设备。</p>
        <p>是否继续停止？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="stop()">停止</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import moment from "moment";
import { mapState } from "vuex";
import echarts from "echarts";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  inject: ["reload"],
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      isLoading: false,
      vFieldOptions1: (v, i, key) => {
        return {
          value: v[key],
          input: (inputVal) => {
            this.todayAlarmTop5List[i][key] = inputVal;
          },
        };
      },
      vFieldOptions2: (v, i, key) => {
        return {
          value: v[key],
          input: (inputVal) => {
            this.realtimeAlarmList[i][key] = inputVal;
          },
        };
      },
      vFieldOptions3: (key) => {
        return {
          value: this[key],
          input: (inputVal) => {
            this[key] = inputVal;
          },
        };
      },
      vFieldOptions4: (obj, key) => {
        return {
          value: this[obj][key],
          input: (inputVal) => {
            this[obj][key] = inputVal;
          },
        };
      },
      vFieldOptions5: (v, i, key) => {
        return {
          value: v[key],
          input: (inputVal) => {
            this.timeEfficiencyTop10List[i][key] = inputVal;
          },
        };
      },
      vFieldOptions6: (v, i, key) => {
        return {
          value: v[key],
          input: (inputVal) => {
            this.deviceRealTimeStatusList[i][key] = inputVal;
          },
        };
      },
      vFieldOptions7: (obj, key) => {
        return {
          value: this[obj][key],
          input: (inputVal) => {
            this[obj][key] = inputVal;
          },
        };
      },
      stopModal: false,
      startModal: false,
      lampWinV: {},
      lampWinX: 0,
      lampWinY: 0,
      showLampWin: false,
      // 标题
      title: "中央集控指挥中心",
      // 左上角 LOGO
      logo: "",
      // 右上角日期
      nowTime: moment(new Date().getTime()).format("YYYY-MM-DD"),
      CList: ["#D7D7D7", "#88D904", "#0006D3", "#F59A23", "#D9001B"],
      SList: ["关机", "运行", "调试", "空闲", "报警"],
      // 设置弹框是否显示
      settingModal: false,
      // 今日报警时长 Top5 列表数据
      todayAlarmTop5List: [
        {
          station: "",
          duration: 0,
        },
      ],
      // 实时报警信息列表数据
      realtimeAlarmList: [
        {
          station: "",
          alarmContent: "",
          duration: 0,
        },
      ],
      // 时间稼动率统计
      timeEfficiencyV: 0,
      // 设备状态汇总数据
      deviceStatusSummaryData: {
        // 运行设备数量
        runNum: 0,
        // 调试设备数量
        debugNum: 0,
        // 空闲设备数量
        freeNum: 0,
        // 报警设备数量
        errorNum: 0,
        // 关机设备数量
        closeNum: 0,
      },
      // 时间稼动率 Top10 列表数据
      timeEfficiencyTop10List: [
        {
          station: "",
          percent: 0,
        },
      ],
      // 设备实时状态列表数据
      deviceRealTimeStatusList: [],
      // 设备状态分布数据
      deviceStatusDistributeData: {
        hour1: 0,
        hour2: 0,
        hour3: 0,
        hour4: 0,
        hour5: 0,
      },
    };
  },
  computed: {
    ...mapState(["user"]),
    optionSettingLeft: function () {
      return {
        step: 10, // 数值越大速度滚动越快
        // limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        // direction: 0, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 49, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    optionSettingRight: function () {
      return {
        step: 10, // 数值越大速度滚动越快
        // limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        // direction: 0, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 53, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    // 获取左上角 LOGO
    const _this = this;
    let { user } = this;
    if (user && user.logo) {
      _this.logo = user.logo;
    } else {
      _this.logo = require("../../../static/images/siger.png");
    }
    // 初始化
    _this.init();
    document.body.onclick = function () {
      if ((_this.showLampWin = true)) {
        _this.showLampWin = false;
      }
    };
    $(".deviceStatusScreenClass .ivu-modal .ivu-modal-body").on(
      "scroll",
      () => {
        $(".ivu-select-dropdown-transfer").css("display", "none");
      }
    );
  },
  methods: {
    confirmStart() {
      this.startModal = true;
    },
    start() {
      setTimeout(() => {
        this.$Message.success("启动成功！");
        this.startModal = false;
      }, 1000);
    },
    confirmStop() {
      this.stopModal = true;
    },
    stop() {
      setTimeout(() => {
        this.$Message.success("停止成功！");
        this.stopModal = false;
      }, 1000);
    },
    openLampWin(v) {
      console.log(v);
      this.showLampWin = true;
      this.lampWinX = v.x + 40;
      this.lampWinY = v.y;
      this.lampWinV = v;
    },
    init() {
      const _this = this;
      _this.axios
        .request({
          url: "/Dashboard/DashboardCjrfStaticPage/GetAllCjrfData",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            _this.todayAlarmTop5List =
              data.alarm && Array.isArray(data.alarm) && data.alarm.length
                ? data.alarm
                : [
                    {
                      station: "",
                      duration: 0,
                    },
                  ];
            _this.timeEfficiencyTop10List =
              data.efficiency &&
              Array.isArray(data.efficiency) &&
              data.efficiency.length
                ? data.efficiency
                : [
                    {
                      station: "",
                      percent: 0,
                    },
                  ];
            _this.timeEfficiencyV = data.timeefficiency.timeEfficiencyV
              ? data.timeefficiency.timeEfficiencyV
              : 0;
            _this.realtimeAlarmList =
              data.timealarm &&
              Array.isArray(data.timealarm) &&
              data.timealarm.length
                ? data.timealarm
                : [
                    {
                      station: "",
                      alarmContent: "",
                      duration: 0,
                    },
                  ];
            _this.deviceStatusSummaryData = data.device
              ? data.device
              : {
                  // 运行设备数量
                  runNum: 0,
                  // 调试设备数量
                  debugNum: 0,
                  // 空闲设备数量
                  freeNum: 0,
                  // 报警设备数量
                  errorNum: 0,
                  // 关机设备数量
                  closeNum: 0,
                };
            if (
              data.realtime &&
              Array.isArray(data.realtime) &&
              data.realtime.length
            ) {
              _this.deviceRealTimeStatusList = data.realtime.map((v) => {
                v.status = v.current_status;
                return v;
              });
            } else {
              _this.deviceRealTimeStatusList = [
                {
                  station: "",
                  deviceNo: "",
                  deviceName: "",
                  devicePurpose: "",
                  deviceWarn: "",
                  status: 1,
                  duration: 0,
                  x: 0,
                  y: 0,
                  type: 1,
                },
              ];
            }

            _this.deviceStatusDistributeData = data.distribute
              ? data.distribute
              : {
                  hour1: 0,
                  hour2: 0,
                  hour3: 0,
                  hour4: 0,
                  hour5: 0,
                };
            _this.todayAlarmTop5();
            _this.timeEfficiency();
            _this.timeEfficiencyTop10();
            _this.deviceStatusDistribute();
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    saveData() {
      const _this = this;
      let {
        todayAlarmTop5List,
        realtimeAlarmList,
        timeEfficiencyV,
        deviceStatusSummaryData,
        timeEfficiencyTop10List,
        deviceRealTimeStatusList,
        deviceStatusDistributeData,
      } = this;
      let data = {
        alarm: todayAlarmTop5List,
        efficiency: timeEfficiencyTop10List,
        timeefficiency: { timeEfficiencyV },
        timealarm: realtimeAlarmList,
        device: deviceStatusSummaryData,
        realtime: deviceRealTimeStatusList.map((v) => {
          v.current_status = v.status;
          return v;
        }),
        distribute: deviceStatusDistributeData,
      };
      _this.isLoading = true;

      _this.axios
        .request({
          url: "/Dashboard/DashboardCjrfStaticPage/AddCjrfData",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.isLoading = false;
            _this.$Message.success(_this.$t(result.msg));
            _this.reload();
          } else {
            _this.isLoading = false;
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    groupAdd4() {
      return false;
      this.deviceRealTimeStatusList.push({
        station: "",
        deviceNo: "",
        deviceName: "",
        devicePurpose: "",
        deviceWarn: "",
        status: "",
        duration: 0,
        x: 0,
        y: 0,
        type: "",
      });
    },
    groupDel4(i) {
      this.deviceRealTimeStatusList.splice(i, 1);
    },
    groupAdd3() {
      let { timeEfficiencyTop10List } = this;
      if (timeEfficiencyTop10List.length == 10) {
        return false;
      }
      this.timeEfficiencyTop10List.push({
        station: "",
        percent: 0,
      });
    },
    groupDel3(i) {
      this.timeEfficiencyTop10List.splice(i, 1);
    },
    groupAdd2() {
      this.realtimeAlarmList.push({
        station: "",
        alarmContent: "",
        duration: "",
      });
    },
    groupDel2(i) {
      this.realtimeAlarmList.splice(i, 1);
    },
    groupAdd1() {
      let { todayAlarmTop5List } = this;
      if (todayAlarmTop5List.length == 5) {
        return false;
      }
      this.todayAlarmTop5List.push({
        station: "",
        duration: "",
      });
    },
    groupDel1(i) {
      this.todayAlarmTop5List.splice(i, 1);
    },
    // 右上角设置
    setting() {
      const _this = this;
      _this.settingModal = true;
    },
    // 左上角返回
    back() {
      this.$router.go(-1);
    },
    // 渲染今日报警时长 Top5
    todayAlarmTop5() {
      let yList = [];
      let xList = [];
      let { todayAlarmTop5List } = this;
      if (
        todayAlarmTop5List &&
        Array.isArray(todayAlarmTop5List) &&
        todayAlarmTop5List.length
      ) {
        todayAlarmTop5List.forEach((v) => {
          xList.push(v.duration);
          yList.push(v.station);
        });
      }
      let option = {
        title: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: 12,
          left: 120,
          right: 48,
          bottom: 24,
          width: "auto",
          height: "auto",
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: "#44505B",
              width: "1",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#44505B",
            },
          },
          splitLine: { show: false },
        },
        yAxis: {
          type: "category",
          data: yList.reverse(),
          axisLine: {
            lineStyle: {
              color: "#44505B",
              width: "1",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
            interval: 0,
            rotate: 0,
          },
        },
        series: [
          {
            type: "bar",
            data: xList.reverse(),
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "#DF9B55",
              },
            },
            label: {
              show: true,
              position: "right",
              formatter: "{c}分钟",
              color: "#fff",
            },
          },
        ],
      };
      echarts.init(document.getElementById("todayAlarmTop5")).setOption(option);
    },
    // 渲染时间稼动率统计模块
    timeEfficiency() {
      let { timeEfficiencyV } = this;
      let percent = timeEfficiencyV;
      let option = {
        tooltip: {
          formatter: "{b} : {c}%",
        },
        series: [
          {
            name: "时间稼动率",
            type: "gauge",
            detail: {
              formatter: "{value}%",
              textStyle: {
                fontSize: 16,
                color: "#fff",
              },
            },
            data: [{ value: percent, name: "时间稼动率" }],
            radius: "95%",
            title: {
              offsetCenter: [0, "75%"],
              textStyle: {
                color: "#fff",
                fontSize: 20,
                fontWeight: "bold",
              },
            },
          },
        ],
      };
      echarts.init(document.getElementById("timeEfficiency")).setOption(option);
    },
    // 渲染时间稼动率 Top10 模块
    timeEfficiencyTop10() {
      let xList = [];
      let yList = [];
      let { timeEfficiencyTop10List } = this;
      if (
        timeEfficiencyTop10List &&
        Array.isArray(timeEfficiencyTop10List) &&
        timeEfficiencyTop10List.length
      ) {
        timeEfficiencyTop10List.forEach((v) => {
          xList.push(v.station);
          yList.push(v.percent);
        });
      }
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: 38,
          left: 80,
          right: 66,
          bottom: 64,
          width: "auto",
          height: "auto",
        },
        xAxis: [
          {
            name: "工位名称",
            nameTextStyle: {
              color: "#fff",
            },
            type: "category",
            data: xList,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#44505B",
                width: "1",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              interval: 0, // 显示所有X轴信息
              rotate: 25, // 倾斜角度
            },
          },
        ],
        yAxis: [
          {
            name: "%",
            nameTextStyle: {
              color: "#fff",
            },
            type: "value",
            min: 0,
            max: 100,
            // scale: true,
            // splitNumber: 4,
            axisLine: {
              lineStyle: {
                width: 0,
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 24,
            data: yList,
            itemStyle: {
              normal: {
                color: function (params) {
                  if (
                    params.dataIndex == 0 ||
                    params.dataIndex == 1 ||
                    params.dataIndex == 2
                  ) {
                    return "#DF9B55";
                  } else {
                    return "#28B9FF";
                  }
                },
              },
            },
          },
        ],
      };
      echarts
        .init(document.getElementById("timeEfficiencyTop10"))
        .setOption(option);
    },
    // 渲染设备状态分布模块
    deviceStatusDistribute() {
      let { deviceStatusDistributeData } = this;
      let data = deviceStatusDistributeData;
      let option = {
        // 设置饼状图每个颜色块的颜色
        color: ["#8FEB5B", "#FFFF00", "#0000FF", "#D7D7D7", "#D9001B"],
        graphic: [
          {
            type: "text",
            left: "center",
            top: "46%",
            style: {
              text: "运行总时长",
              textAlign: "center",
              fill: "#fff",
              fontSize: 20,
              color: "#fff",
              fontWeight: "bold",
            },
          },
          {
            type: "text",
            left: "center",
            top: "54%",
            style: {
              text: `${Math.round(data.hour2)}小时`,
              textAlign: "center",
              fill: "#fff",
              fontSize: 20,
              color: "#fff",
              fontWeight: "bold",
            },
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            label: {
              formatter: "{b|{b}：}{per|{d}%}",
              rich: {
                b: {
                  fontSize: 13,
                  lineHeight: 26,
                  fontWeight: "bold",
                },
                per: {
                  fontSize: 13,
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              length: 10,
              length2: 10,
            },
            data: [
              { value: data.hour2, name: "运行" },
              { value: data.hour4, name: "空闲" },
              { value: data.hour3, name: "调试" },
              { value: data.hour1, name: "关机" },
              { value: data.hour5, name: "报警" },
            ],
          },
        ],
      };
      echarts
        .init(document.getElementById("deviceStatusDistribute"))
        .setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.rowF {
  margin-top: 14px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.row {
  margin-bottom: 4px;
  font-size: 14px;
  color: #333333;
  .rowL {
    display: inline-block;
    font-weight: bolder;
    white-space: nowrap;
  }
  .rowR {
    display: inline;
  }
}
.lampWin {
  position: absolute;
  z-index: 9;
  background-color: #ffffff;
  padding: 8px 12px;
  width: 240px;
}
.lamp {
  position: absolute;
  > div {
    width: 30px;
    height: 36px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.window {
  color: #fff;
  position: absolute;
  > div {
    width: 200px;
    height: 120px;
    background: url("../../../static/images/u735.svg") center center no-repeat;
    background-size: 100% 100%;
    padding-left: 12px;
    padding-top: 4px;
    padding-right: 4px;
    .window_title {
      color: #00ffff;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}
.groupBtn {
  width: 32px;
  height: 32px;
  background: rgb(87, 163, 243);
  color: rgb(255, 255, 255);
  display: inline-block;
  vertical-align: top;
  font-size: 20px;
  text-align: center;
  border-radius: 3px;
  margin-left: 5px;
  width: 30px;
  height: 30px;
  background: #57a3f3;
  color: #fff;
  cursor: pointer;
}
.groupList {
  margin: 5px 0px;
  .groupItem2 {
    width: 160px;
    height: 32px;
    line-height: 32px;
    display: inline-block;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
  .groupItem3 {
    width: 120px;
    height: 32px;
    line-height: 32px;
    display: inline-block;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
  .groupItem6 {
    width: 100px;
    height: 32px;
    line-height: 32px;
    display: inline-block;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
}
.deviceStatus {
  font-weight: bolder;
  font-size: 16px;
}
.canvas {
  height: 100%;
}
.setting {
  display: inline-block;
  position: fixed;
  right: 10px;
  top: -20px;
}
.setting img {
  width: 40px;
  cursor: pointer;
}
.testdiv {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  background-image: url("../../../static/images/u0.png");
  background-size: 100% 100%;
  padding: 11px;
  box-sizing: border-box;
  overflow-y: auto;
  .top_title {
    width: 100%;
    height: 106px;
    background: url("../../../static/images/u2.png") center center no-repeat;
    background-size: 81.25% 100%;
    padding: 0 25px 0 40px;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    font-size: 59px;
    color: #fff;
    font-weight: bold;
    line-height: 100px;
    position: relative;
    font-style: italic;

    .logo {
      width: 200px;
      height: 60px;
      float: left;
      margin-top: 27px;
      cursor: pointer;
    }

    .times_bg {
      width: 200px;
      height: 40px;
      font-size: 24px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      float: right;
      background: url("../../../static/images/u4.png") center center no-repeat;
      background-size: 100% 40px;
      margin-top: 34px;
    }
  }
  .container {
    clear: both;
    width: 100%;
    padding: 15px 13px 22px 20px;
    box-sizing: border-box;
    .formBox_left {
      width: 25%;
      float: left;
      .formBox {
        .form_title {
          width: 96%;
          height: 40px;
          background: url("../../../static/images/u6.png") center center
            no-repeat;
          background-size: 100% 100%;
          font-size: 24px;
          color: #b1e2ff;
          line-height: 40px;
          padding-left: 45px;
          box-sizing: border-box;
          margin-bottom: 12px;
        }
        .table_bg {
          height: 245px;
          padding: 5px;
          background: url("../../../static/images/u9.png") center center
            no-repeat;
          background-size: 100% 100%;
        }
        .table_bottom {
          margin: 5px 0;
          width: 100%;
          height: 270px;
          background: url("../../../static/images/device_status_left.png")
            center center no-repeat;
          background-size: 100% 100%;
        }
        .formMain {
          width: 100%;
          box-sizing: border-box;
          .echo_head > li,
          .echo_body > div {
            width: 33.3333%;
          }
          .table_title_bg {
            width: 100%;
            height: 55px;
            padding: 0 6px;

            li {
              height: 100%;
              line-height: 50px;
              font-size: 16px;
              color: #b1e2ff;
              font-weight: bold;
              text-align: center;
              border: none !important;
              display: inline-block;
            }
          }
          .tbaleSlide {
            height: 196px;
            overflow: hidden;
            .tableDetail {
              height: auto;
              li {
                width: 100%;
                text-align: center;
                color: #fff;
                height: 49px;
                display: flex;
                align-items: center;
                overflow: hidden;
                div {
                  overflow: hidden;
                  white-space: nowrap;
                  margin: 0 12px;
                  float: left;
                  line-height: 49px;
                  font-size: 14px;
                  height: 49px;
                }
              }
            }
          }
        }
      }
    }
    // 暂不需要修改
    .formBox_middle {
      width: 50%;
      float: left;
      padding: 0 20px;
      .middle_top {
        width: 100%;
        padding: 0 24px;

        ul {
          width: 100%;
          display: inline-block;
          color: #fff;
          font-size: 25px;

          li {
            width: 20%;
            display: inline-block;
            text-align: center;
            font-style: italic;
            font-weight: bold;
            .echo_run {
              color: #2a8741;
            }
            .echo_debug {
              color: #0106d7;
            }
            .echo_free {
              color: #ce9043;
            }
            .echo_error {
              color: #af0d1d;
            }
            .echo_close {
              color: #dfe9f2;
            }
            div {
              font-size: 40px;
              font-weight: normal;
              font-family: "DS-DIGII";
              background: url(../../../static/images/u487.png);
              background-size: 100% 100%;
            }
          }
        }
      }
      .middle_img {
        width: 100%;
        height: 520px;
        position: relative;

        img {
          height: 100%;
          width: 100%;
        }
      }
      .middle_bottom {
        .formBox {
          .form_title {
            width: 96%;
            height: 40px;
            background: url("../../../static/images/u6.png") center center
              no-repeat;
            background-size: 100% 100%;
            font-size: 24px;
            color: #b1e2ff;
            line-height: 40px;
            padding-left: 45px;
            box-sizing: border-box;
            margin-bottom: 12px;
          }
          .formMain {
            box-sizing: border-box;
            width: 100%;
            background: url("../../../static/images/u11.png") center center
              no-repeat;
            background-size: 100% 100%;
          }
          .table_bg {
            height: 250px;
            padding: 5px;
            background: url("../../../static/images/u9.png") center center
              no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
    // 暂不需要修改
    .formBox_right {
      width: 25%;
      float: right;
      .formBox {
        .form_title {
          width: 96%;
          height: 40px;
          background: url("../../../static/images/u6.png") center center
            no-repeat;
          background-size: 100% 100%;
          font-size: 24px;
          color: #b1e2ff;
          line-height: 40px;
          padding-left: 45px;
          box-sizing: border-box;
          margin-bottom: 12px;
        }
        .formMain {
          width: 100%;
          box-sizing: border-box;
        }
        .table_bg {
          height: 350px;
          background: url("../../../static/images/u9.png") center center
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
.echo_formBox {
  margin-bottom: 14px;
  .formMain {
    height: 450px;
    background: url("../../../static/images/device_status_right.png") center
      center no-repeat;
    background-size: 100% 100%;

    .echo_head {
      width: 100%;
      height: 66px;
      padding: 0 6px;

      li {
        height: 100%;
        line-height: 50px;
        font-size: 16px;
        color: #b1e2ff;
        font-weight: bold;
        text-align: center;
        border: none !important;
        display: inline-block;
      }
    }
    .echo_head > li,
    .echo_body > div {
      width: 33.3333%;
    }

    .tbaleSlide {
      height: 371px;
      overflow: hidden;
      .tableDetail {
        height: auto;
        li {
          width: 100%;
          text-align: center;
          color: #fff;
          height: 53px;
          overflow: hidden;
          display: flex;
          align-items: center;
          div {
            overflow: hidden;
            white-space: nowrap;
            margin: 0 14px;
            float: left;
            line-height: 53px;
            font-size: 14px;
            height: 53px;
          }
        }
      }
    }
  }
}
// 以下样式不需要修改
::-webkit-scrollbar {
  display: none;
}
@font-face {
  font-family: "DS-DIGII";
  src: url(../../../static/font/DS-DIGI.TTF)format("truetype");
}
</style>
