<template>
  <div class="testdiv">
    <!-- 看板头部 -->
    <div class="top_title">
      <span>{{ title }}</span>
      <img :src="imgLogo" class="logo" @click="back()" />
      <div class="times_bg">{{ nowTime }}</div>
      <div class="setting" @click="openSet()">
        <img src="../../../static/images/setting.svg" />
      </div>
    </div>
    <!-- 看板主体内容 -->
    <div class="container">
      <!-- 看板左侧 -->
      <div class="formBox_left">
        <div class="formBox">
          <div class="form_title">报警时长TOP5</div>
          <div class="formMain table_bg">
            <div style="height: 100%" id="canvas_1"></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="list_1"
              :class-option="optionSettingLeft"
              class="tbaleSlide"
            >
              <ul class="tableDetail">
                <li v-if="list_1.length == 0"></li>
                <li
                  class="echo_body"
                  v-for="(item, i) in list_1"
                  :key="'list_1' + i"
                  v-else
                >
                  <div>{{ item.station_name }}</div>
                  <div>{{ item.alarmContent }}</div>
                  <div>{{ item.time_span | timeConvert }}</div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="formBox">
          <div class="form_title">时间稼动率统计</div>
          <div class="formMain table_bg">
            <div style="height: 100%" id="canvas_2"></div>
          </div>
        </div>
      </div>
      <!-- 看板中间 -->
      <div class="formBox_middle">
        <div class="middle_top">
          <ul>
            <li>
              <span class="echo_run">运行</span>
              <div>{{ runNum }}</div>
            </li>
            <li>
              <span class="echo_debug">调试</span>
              <div>{{ debugNum }}</div>
            </li>
            <li>
              <span class="echo_free">空闲</span>
              <div>{{ freeNum }}</div>
            </li>
            <li>
              <span class="echo_error">报警</span>
              <div>{{ errorNum }}</div>
            </li>
            <li>
              <span class="echo_close">关机</span>
              <div>{{ closeNum }}</div>
            </li>
          </ul>
        </div>
        <div class="middle_img">
          <img v-if="backImgSrc" :src="img_prefix + backImgSrc" />
          <div
            class="lamp"
            v-for="(item, n) in equipmentList"
            :key="'lamp' + n"
            :style="{ left: item.x + 'px', top: item.y + 'px' }"
          >
            <div v-if="lampStatus == 2">
              <img
                v-if="item.staus == 1"
                src="../../../static/dashboardImg/run.png"
              />
              <img
                v-if="item.staus == 2"
                src="../../../static/dashboardImg/debug.png"
              />
              <img
                v-if="item.staus == 3"
                src="../../../static/dashboardImg/free.png"
              />
              <img
                v-if="item.staus == 4"
                src="../../../static/dashboardImg/error.png"
              />
              <img
                v-if="item.staus == 0"
                src="../../../static/dashboardImg/close.png"
              />
            </div>
          </div>
          <div
            class="window"
            v-for="(item, d) in equipmentList"
            :key="'window' + d"
            :style="{ left: item.x + 'px', top: item.y + 'px' }"
          >
            <div v-if="lampStatus == 1">
              <h3 class="window_title">
                {{ item.title }}-{{ item.machineTitle }}
              </h3>
              <h5>设备状态：{{ statusList[item.staus] }}</h5>
              <h5>
                持续时长：{{
                  item.machinestatus[item.staus] &&
                  item.machinestatus[item.staus].time
                    ? item.machinestatus[item.staus].time
                    : 0
                }}分钟
              </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">6#-4545</div>
            </div>
            <div class="row">
              <div class="rowL">设备名称：</div>
              <div class="rowR">三车设备</div>
            </div>
            <div class="row">
              <div class="rowL">当前状态：</div>
              <div class="rowR">运行</div>
            </div>
            <div class="row">
              <div class="rowL">设备报警信息：</div>
              <div class="rowR">怪乖的大广东饭店丰富的辅导费放</div>
            </div>
          </div>
        </div>
        <div class="middle_bottom">
          <div class="formBox">
            <div class="form_title">时间稼动率TOP10</div>
            <div class="formMain table_bg">
              <div style="height: 100%" id="canvas_3"></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="list_2"
              :class-option="optionSettingRight"
              class="seamless-warp tbaleSlide"
            >
              <ul class="tableDetail">
                <li v-if="list_2.length == 0"></li>
                <li
                  class="echo_body"
                  v-for="(item, e) in list_2"
                  :key="'list_2' + e"
                  v-else
                >
                  <div>{{ item.machineTitle }}</div>
                  <div
                    :style="{
                      color: colorList[item.staus],
                      fontWeight: 'bolder',
                      fontSize: '16px',
                    }"
                  >
                    {{ statusList[item.staus] }}
                  </div>
                  <div>
                    {{
                      item.machinestatus[item.staus] &&
                      item.machinestatus[item.staus].time
                        ? item.machinestatus[item.staus].time
                        : 0
                    }}分钟
                  </div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="formBox">
          <div class="form_title">设备状态分布</div>
          <div class="formMain table_bg">
            <div style="height: 100%" id="canvas_4"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出框 -->
    <Modal :styles="setting" v-model="setModal" footer-hide>
      <p slot="header">
        <span>请选择要跳转的组合</span>
      </p>
      <div class="modal_body" style="max-height: 160px; overflow-y: auto">
        <List size="small">
          <ListItem v-for="(v, i) in combList" :key="i">
            <span class="setItem" @click="play(v.id)">{{ v.title }}</span>
          </ListItem>
        </List>
      </div>
    </Modal>
  </div>
</template>
<script>
import echarts from "echarts";
import vueSeamlessScroll from "vue-seamless-scroll";
import moment from "moment";
import { setInterval, clearInterval } from "timers";
import { mapState } from "vuex";
import config from "@/config";

export default {
  inject: ["reload"],
  data() {
    return {
      combList: [],
      lampWinX: 0,
      lampWinY: 0,
      showLampWin: false,
      // 设备状态显示类型
      lampStatus: 0,
      // 设备状态列表
      equipmentList: [],
      // 设备状态显示背景图片
      backImgSrc: "",
      // 图片链接前缀
      img_prefix:
        config.publicPath[process.env.NODE_ENV == "production" ? "pro" : "dev"],
      imgLogo: require("../../../static/images/siger.png"),
      nowTime: moment(new Date().getTime()).format("YYYY-MM-DD"),
      timer: 0,
      timeArr: 0,
      colorList: ["#C6C5CB", "#88D904", "#0006D3", "#F59A23", "#D9001B"],
      statusList: ["关机", "运行", "调试", "空闲", "报警"],
      // 实时报警信息列表
      list_1: [],
      // 设备实时状态列表
      list_2: [],
      // 运行设备数量
      runNum: 0,
      // 调试设备数量
      debugNum: 0,
      // 空闲设备数量
      freeNum: 0,
      // 报警设备数量
      errorNum: 0,
      // 关机设备数量
      closeNum: 0,
      setModal: false,
    };
  },
  components: {
    vueSeamlessScroll,
  },
  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)
      };
    },
    combId() {
      return this.$route.query.combId;
    },
    title() {
      return this.$route.query.title;
    },
    setting() {
      return {
        position: "fixed",
        top: "50px",
        right: "50px",
        width: "250px",
      };
    },
  },
  filters: {
    timeConvert(time) {
      let seconds = parseInt(time);
      function secondsFormat(s) {
        let hour = Math.floor(s / 3600);
        let minute = Math.floor((s - hour * 3600) / 60);
        let second = s - hour * 3600 - minute * 60;
        return hour + "时" + minute + "分" + second + "秒";
      }
      return secondsFormat(seconds);
    },
  },
  created() {
    if (this.user.logo) {
      this.imgLogo = this.user.logo;
    }
  },
  mounted() {
    const _this = this;
    // 获取状态灯和状态浮窗相关数据
    this.request_0();

    // 今日报警 Top5
    this.request_1();
    // 时间稼动率统计 And 时间稼动率 Top10
    this.request_3();
    // 设备状态分布
    this.request_5();

    if (this.timer) {
      clearInterval(this.timer);
    } else {
      // 实时报警信息
      this.request_2();
      // 设备实时状态
      this.request_4();
      this.timer = setInterval(() => {
        // 实时报警信息
        this.request_2();
        // 设备实时状态
        this.request_4();
      }, 1000 * 60 * 5);
    }
    if (this.timeArr) {
      clearInterval(this.timeArr);
    } else {
      this.timeArr = setInterval(() => {
        this.reload();
      }, 1000 * 60 * 60);
    }
    document.body.onclick = function () {
      if ((_this.showLampWin = true)) {
        _this.showLampWin = false;
      }
    };
  },
  methods: {
    openSet() {
      const _this = this;
      _this.axios
        .request({
          url: "/dashboard/DashboardConfig/GetCombList",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.combList = result.data_comb;
            _this.setModal = true;
          }
        });
    },
    // 页面播放
    play(combId) {
      const _this = this;
      let params = {
        id: combId,
        projectid: _this.user.projectId,
      };
      _this.axios
        .request({
          url: "/dashboard/DashboardShow/getallcombpages",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.$router.replace({ name: "8000063", query: { combId } });
            _this.reload();
          }
        });
    },
    openLampWin(v) {
      this.showLampWin = true;
      this.lampWinX = v.x + 40;
      this.lampWinY = v.y;
    },
    // 今日报警 Top5
    request_1() {
      const _this = this;
      const query = _this.$route.query;
      // 设备列表
      let list_1 = [];
      // 设备报警时长列表
      let list_2 = [];
      let params = {
        patial_code: query.patial_code,
        page_id: query.pageId,
        projectid: _this.user.projectId,
      };
      _this.axios
        .request({
          url: "/cnc/MachineAlarm/GetAlarmDataForAnalysList",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let list = result.data;
            if (Array.isArray(list) && list.length) {
              // 只取前五个数据，因为是 Top5
              for (let i = 0; i < 5; i++) {
                if (
                  !list[i] ||
                  !list[i].ordinate ||
                  !Math.round(list[i].ordinate / 60)
                ) {
                  continue;
                }
                list_1.push(list[i].abscissa);
                list_2.push(Math.round(list[i].ordinate / 60));
              }
              list_1.reverse();
              list_2.reverse();
              _this.render_1(list_1, list_2);
            }
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    render_1(list_1, list_2) {
      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: list_1,
          axisLine: {
            lineStyle: {
              color: "#44505B",
              width: "1",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
            interval: 0,
            rotate: 0,
          },
        },
        series: [
          {
            type: "bar",
            data: list_2,
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "#DF9B55",
              },
            },
            label: {
              show: true,
              position: "right",
              formatter: "{c}分钟",
              color: "#fff",
            },
          },
        ],
      };
      echarts.init(document.getElementById("canvas_1")).setOption(option);
    },
    // 实时报警信息
    request_2() {
      const _this = this;
      const query = _this.$route.query;
      let params = {
        patial_code: query.patial_code,
        page_id: query.pageId,
        projectid: _this.user.projectId,
      };
      _this.axios
        .request({
          url: "/cnc/Machine/MachineAlarmDetailTwo",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            // 处理后得到的实时报警信息列表
            let list = [];
            let data = result.data.productionParameterLis;
            for (let key in data) {
              for (let i = 0; i < data[key].length; i++) {
                list.push(data[key][i]);
              }
            }
            _this.list_1 = list;
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 时间稼动率统计 And 时间稼动率 Top10
    request_3() {
      const _this = this;
      const query = _this.$route.query;
      let params = {
        patial_code: query.patial_code,
        page_id: query.pageId,
        projectid: _this.user.projectId,
      };
      let xList = [];
      let yList = [];
      _this.axios
        .request({
          url: "/cnc/ProductSum/EfficiencyAnalysisInfoTwo",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let list = result.data;
            if (Array.isArray(list) && list.length) {
              // 渲染时间稼动率统计模块
              let percent = list[0].sum;
              _this.render_2(percent);
              // 渲染时间稼动率 Top10 模块
              for (let i = 0; i < 10; i++) {
                if (list[i] && list[i].title && list[i].productivity) {
                  xList.push(list[i].title);
                  yList.push(list[i].productivity);
                }
              }
              _this.render_3(xList, yList);
            }
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 渲染时间稼动率统计模块
    render_2(percent) {
      let option = {
        tooltip: {
          formatter: "{b} : {c}%",
        },
        series: [
          {
            name: "时间稼动率",
            type: "gauge",
            detail: {
              formatter: "{value}%",
              textStyle: {
                fontSize: 16,
                color: "#fff",
              },
            },
            data: [{ value: percent, name: "时间稼动率" }],
            radius: "95%",
            axisLine: {
              lineStyle: {
                color: [
                  [0.2, "#C23531"],
                  [0.8, "#63869E"],
                  [1, "#91C7AE"],
                ],
              },
            },
            title: {
              offsetCenter: [0, "75%"],
              textStyle: {
                color: "#fff",
                fontSize: 20,
                fontWeight: "bold",
              },
            },
          },
        ],
      };
      if (document.getElementById("canvas_2")) {
        echarts
          .init(document.getElementById("canvas_2"))
          .setOption(option, true);
      }
    },
    // 渲染时间稼动率 Top10 模块
    render_3(xList, yList) {
      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",
            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 "#4EBE96";
                  } else {
                    return "#5789EF";
                  }
                },
              },
            },
          },
        ],
      };
      if (document.getElementById("canvas_3")) {
        echarts.init(document.getElementById("canvas_3")).setOption(option);
      }
    },
    // 设备实时状态
    request_4() {
      const _this = this;
      const query = _this.$route.query;
      let params = {
        patial_code: query.patial_code,
        page_id: query.pageId,
        projectid: _this.user.projectId,
      };
      _this.axios
        .request({
          url: "/cnc/machine/GetMachineCodeTwo",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let list = result.last_data.data;
            _this.list_2 = list;
            // 根据遍历列表计算出设备各个状态的数量
            let runNum = 0,
              debugNum = 0,
              freeNum = 0,
              errorNum = 0,
              closeNum = 0;
            if (Array.isArray(list) && list.length) {
              list.forEach((item, index) => {
                switch (item.staus) {
                  case 0:
                    closeNum++;
                    break;
                  case 1:
                    runNum++;
                    break;
                  case 2:
                    debugNum++;
                    break;
                  case 3:
                    freeNum++;
                    break;
                  case 4:
                    errorNum++;
                    break;
                }
              });
            }
            _this.runNum = runNum;
            _this.debugNum = debugNum;
            _this.freeNum = freeNum;
            _this.errorNum = errorNum;
            _this.closeNum = closeNum;
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 设备状态分布
    request_5() {
      const _this = this;
      const query = _this.$route.query;
      let params = {
        patial_code: query.patial_code,
        page_id: query.pageId,
        projectid: _this.user.projectId,
      };
      _this.axios
        .request({
          url: "/cnc/ProjectSectionMachine/MachineCanvasDataInfoTwo",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data[0].data;
            _this.render_4(data);
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 渲染设备状态分布模块
    render_4(data) {
      let option = {
        // 设置饼状图每个颜色块的颜色
        color: ["#40CC5F", "#F48F37", "#4F8FDB", "#C6C5CB", "#F53D40"],
        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("canvas_4")).setOption(option);
    },
    request_0() {
      const _this = this;
      const query = _this.$route.query;
      let params = {
        patial_code: query.patial_code,
        page_id: query.pageId,
        projectid: _this.user.projectId,
      };
      _this.axios
        .request({
          url: "/cnc/machine/GetMachineCodeTwo",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            // 设备状态背景图片
            let backImgSrc = result.layout;
            _this.backImgSrc = backImgSrc;
            // 设备状态显示类型
            let lampStatus = result.lampStatus;
            _this.lampStatus = lampStatus;
            // 设备状态列表
            let equipmentList = result.last_data.data;
            _this.equipmentList = equipmentList;
          } else {
            _this.$Message.error(_this.$t("接口调用异常！"));
          }
        });
    },
    // 返回
    back() {
      this.$router.go(-1);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timeArr);
  },
  beforeRouteEnter(to, from, next) {
    if (from.path == "/") {
      next((vm) => {
        vm.$router.replace({ name: "8000063", query: { combId: vm.combId } });
      });
      return false;
    }
    next();
  },
};
</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;
  background-color: #ffffff;
  padding: 8px 12px;
  width: 275px;
}
.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;
    }
  }
}
.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: #c6c5cb;
            }
            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");
}
.setting {
  display: inline-block;
  position: fixed;
  right: 20px;
  top: -20px;
  img {
    width: 40px;
    cursor: pointer;
  }
}
.setItem {
  font-size: 14px;
  cursor: pointer;
}
.setItem:hover {
  color: #2d8cf0;
  font-weight: bold;
}
</style>
