<template>
  <!-- SaaS 大屏 -->
  <div class="testdiv">
    <!-- 看板头部 -->
    <div class="top_title">
      <span>精密加工数字化平台</span>
      <img :src="logo" class="logo" @click="back()" />
    </div>
    <!-- 看板主体内容 -->
    <div class="container">
      <!-- 看板左侧 -->
      <div class="formBox_left">
        <div class="formBox">
          <div class="form_title">每月客户数量</div>
          <div class="formMain table_bg">
            <div class="canvas" id="monthly_customer_statistics"></div>
          </div>
        </div>
        <div class="formBox">
          <div class="form_title">每月设备数量</div>
          <div class="formMain table_bg">
            <div class="canvas" id="monthly_device_statistics"></div>
          </div>
        </div>
        <div class="formBox">
          <div class="form_title">客户签约情况</div>
          <div class="formMain table_bottom">
            <vue-seamless-scroll
              :data="sign_record"
              :class-option="ssOption"
              class="tbaleSlide"
            >
              <ul class="tableDetail">
                <li v-if="!sign_record.length"></li>
                <li
                  class="ssRow"
                  v-for="(v, i) in sign_record"
                  :key="'sign' + i"
                  v-else
                >
                  <div>
                    <span class="ssIndex">
                      <div class="ssHorn ssIndexLT"></div>
                      <div class="ssHorn ssIndexLB"></div>
                      <div class="ssHorn ssIndexRT"></div>
                      <div class="ssHorn ssIndexRB"></div>
                      <span class="ssIndex_bg">{{ i + 1 }}</span>
                    </span>
                    <span>{{ v }}</span>
                  </div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <!-- 看板中间 -->
      <div class="formBox_middle">
        <div class="middle_top">
          <ul>
            <li>
              <span>客户数</span>
              <div>{{ cud.cNum }}</div>
            </li>
            <li>
              <span>用户数</span>
              <div>{{ cud.uNum }}</div>
            </li>
            <li>
              <span>设备数</span>
              <div>{{ cud.dNum }}</div>
            </li>
          </ul>
        </div>
        <div class="middle_bottom map" id="map"></div>
      </div>
      <!-- 看板右侧 -->
      <div class="formBox_right">
        <div class="formBox">
          <div class="form_title">客户分布</div>
          <div class="formMain table_bg">
            <div class="canvas" id="customer_distribute"></div>
          </div>
        </div>
        <div class="formBox">
          <div class="form_title">设备分布</div>
          <div class="formMain table_bg">
            <div class="canvas" id="device_distribute"></div>
          </div>
        </div>
        <div class="formBox">
          <div class="form_title">设备状态台数</div>
          <div class="formMain table_bg">
            <div class="canvas" id="device_status_distribute"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import "../../../../node_modules/echarts/map/js/china.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import { setInterval, clearInterval } from "timers";

export default {
  inject: ["reload"],
  components: {
    vueSeamlessScroll,
  },
  computed: {
    ssOption: function () {
      return {
        step: 6, // 数值越大速度滚动越快
        // limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        // direction: 0, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 48, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {
      // LOGO
      logo: require("../../../static/images/siger.png"),
      // 客户签约情况列表数据
      sign_record: [],
      // 小循环定时器
      timerX: null,
      // 大循环定时器
      timerY: null,
      // 每月客户数量 Echarts 实例
      echart_mcs: null,
      // 每月设备数量 Echarts 实例
      echart_mds: null,
      // 客户数、用户数、设备数
      cud: {
        cNum: 0,
        uNum: 0,
        dNum: 0,
      },
      // 中国地区客户分布 Echarts 实例
      echart_map: null,
      // 客户分布 Echarts 实例
      echart_cd: null,
      // 设备分布 Echarts 实例
      echart_dd: null,
      // 设备状态台数 Echarts 实例
      echart_dsd: null,
    };
  },
  mounted() {
    const _this = this;
    let { timerX, timerY } = this;

    // 清除遗留定时器
    if (timerX) {
      clearInterval(timerX);
    }
    if (timerY) {
      clearInterval(timerY);
    }

    _this.init();
    if (this.timer) {
      clearInterval(this.timer);
    } else {
      this.timer = setInterval(() => {
        request_sr();
      }, 1000 * 60 * 5);
    }

    // 小循环获取实时数据 循环周期 一分钟
    _this.timerX = setInterval(() => {
      _this.request_sr();
      _this.request_cud();
    }, 1000 * 60 * 1);
    // 大循环刷新页面图表 循环周期 五分钟
    _this.timerY = setInterval(() => {
      _this.reload();
    }, 1000 * 60 * 5);
  },
  methods: {
    // 返回
    back() {
      this.$router.go(-1);
    },
    // 获取每月客户数量
    request_mcs() {
      const _this = this;
      _this.axios
        .request({
          url: "/Dashboard/SaaSMonitor/GetCustomerCountByMonth",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data && Array.isArray(data) && data.length) {
              let yList = data.map((v) => {
                return v.quantity ? v.quantity : 0;
              });
              _this.render_mcs(yList);
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 获取每月设备数量
    request_mds() {
      const _this = this;
      _this.axios
        .request({
          url: "/Dashboard/SaaSMonitor/GetMachineCountByMonth",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data && Array.isArray(data) && data.length) {
              let yList = data.map((v) => {
                return v.quantity ? v.quantity : 0;
              });
              _this.render_mds(yList);
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 获取客户签约情况
    request_sr() {
      const _this = this;
      _this.axios
        .request({
          url: "/Dashboard/SaaSMonitor/GetMachineCustomerSituation",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data && Array.isArray(data) && data.length) {
              let list = data.map((v) => {
                return `${v.customer_name}，设备数：${v.quantity}，${v.province}${v.city}${v.area}${v.address}`;
              });
              _this.render_sr(list);
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 获取客户分布
    request_cd() {
      const _this = this;
      _this.axios
        .request({
          url: "/Dashboard/SaaSMonitor/GetCustomerAddress",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data && Array.isArray(data) && data.length) {
              let xList = [];
              let yList = [];
              data.forEach((v) => {
                xList.push(v.quantity ? v.quantity : 0);
                yList.push(v.province);
              });
              _this.render_cd(xList, yList);
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 获取设备分布
    request_dd() {
      const _this = this;
      _this.axios
        .request({
          url: "/Dashboard/SaaSMonitor/GetMachineAddress",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data && Array.isArray(data) && data.length) {
              let xList = [];
              let yList = [];
              data.forEach((v) => {
                xList.push(v.quantity ? v.quantity : 0);
                yList.push(v.province);
              });
              _this.render_dd(xList, yList);
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 获取中国地区客户分布
    request_map() {
      const _this = this;
      _this.axios
        .request({
          url: "/Dashboard/SaaSMonitor/GetCoordinate",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data && Array.isArray(data) && data.length) {
              let list = data.map((v) => {
                return {
                  name: v.city,
                  value: [parseFloat(v.longitude), parseFloat(v.latitude)],
                };
              });
              _this.render_map(list);
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 获取客户数、用户数、设备数
    request_cud() {
      const _this = this;
      _this.axios
        .request({
          url: "/Dashboard/SaaSMonitor/GetAllNumber",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            _this.render_cud(
              data.customer_quantity,
              data.user_quantity,
              data.machine_quantity
            );
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },

    // 初始化
    init() {
      this.request_mcs();
      this.request_mds();
      this.request_sr();
      this.request_cd();
      this.request_dd();
      this.request_map();
      this.request_cud();

      this.render_dsd();

      window.onresize = () => {
        if (this.echart_mcs) {
          this.echart_mcs.resize();
        }
        if (this.echart_mds) {
          this.echart_mds.resize();
        }
        if (this.echart_map) {
          this.echart_map.resize();
        }
        if (this.echart_cd) {
          this.echart_cd.resize();
        }
        if (this.echart_dd) {
          this.echart_dd.resize();
        }
        if (this.echart_dsd) {
          this.echart_dsd.resize();
        }
      };
    },

    // 每月客户数量
    render_mcs(yList) {
      const _this = this;

      // 手动清除实例对象，防止内存泄漏
      if (_this.echart_mcs) {
        _this.echart_mcs.dispose();
        _this.echart_mcs = null;
      }
      // 基于准备的dom 元素,  初始化echarts实例
      let dom = document.getElementById("monthly_customer_statistics");
      if (dom) {
        _this.echart_mcs = echarts.init(dom);
        // 指定图标的配置项和数据
        let option = {
          // 提示框
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          // grid 区域
          grid: {
            top: 24,
            left: 44,
            right: 24,
            bottom: 34,
            width: "auto",
            height: "auto",
          },
          // X 轴
          xAxis: [
            {
              type: "category",
              minInterval: 1, // 控制最小刻度的代码
              data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
              ],
              axisLine: {
                lineStyle: {
                  color: "#026292",
                  width: 2,
                },
              },
              axisLabel: {
                textStyle: {
                  color: "#fff",
                },
                interval: 0, // 显示所有X轴信息
                rotate: 30, // 倾斜角度
              },
            },
          ],
          // Y 轴
          yAxis: [
            {
              type: "value",
              minInterval: 1, // 控制最小刻度的代码
              scale: true,
              splitNumber: 4,
              splitLine: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: "#026292",
                  width: 2,
                },
              },
              axisLabel: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
          ],
          // 内容数据
          series: [
            {
              type: "bar", // 类型
              barWidth: 18, // 宽度
              data: yList, // 数据
              itemStyle: {
                // 图形形状
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: "#008080",
                    },
                    {
                      offset: 0,
                      color: "#00FBFB",
                    },
                  ]),
                },
              },
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表
        _this.echart_mcs.setOption(option);
      }
    },
    // 每月设备数量
    render_mds(yList) {
      const _this = this;

      // 手动清除实例对象，防止内存泄漏
      if (_this.echart_mds) {
        _this.echart_mds.dispose();
        _this.echart_mds = null;
      }

      let dom = document.getElementById("monthly_device_statistics");
      if (dom) {
        _this.echart_mds = echarts.init(dom);
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            top: 24,
            left: 44,
            right: 24,
            bottom: 34,
            width: "auto",
            height: "auto",
          },
          xAxis: [
            {
              type: "category",
              minInterval: 1, // 控制最小刻度的代码
              data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
              ],
              splitLine: {
                show: false,
                interval: 1,
                lineStyle: {
                  color: "#0284C1",
                  width: 1,
                  type: "dotted",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#026292",
                  width: 2,
                },
              },
              axisLabel: {
                textStyle: {
                  color: "#fff",
                },
                interval: 0, // 显示所有X轴信息
                rotate: 30, // 倾斜角度
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              minInterval: 1, // 控制最小刻度的代码
              scale: true,
              splitNumber: 4,
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#0284C1",
                  width: 1,
                  type: "dotted",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#026292",
                  width: 2,
                },
              },
              axisLabel: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
          ],
          series: [
            {
              type: "line",
              data: yList,
              itemStyle: {
                normal: {
                  color: "#BC7DF9",
                },
              },
            },
          ],
        };
        _this.echart_mds.setOption(option);
      }
    },
    // 客户签约情况
    render_sr(list) {
      this.sign_record = list;
    },
    // 客户数、用户数、设备数
    render_cud(c, u, d) {
      this.cud = {
        cNum: c ? c : 0,
        uNum: u ? u : 0,
        dNum: d ? d : 0,
      };
    },
    // 中国地区客户分布
    render_map(list) {
      list.push({
        name: "苏州市",
        value: [120.63132, 31.30227],
      });
      list.push({
        name: "重庆市",
        value: [106.54041, 29.40268],
      });
      const _this = this;

      // 手动清除实例对象，防止内存泄漏
      if (_this.echart_map) {
        _this.echart_map.dispose();
        _this.echart_map = null;
      }

      let dom = document.getElementById("map");
      if (dom) {
        _this.echart_map = echarts.init(dom);
        let option = {
          title: false,
          geo: {
            map: "china", // 表示中国地图
            roam: false, // 支持扩大缩小
            zoom: 1.2,
            label: {
              normal: {
                show: false, // 是否显示对应地名
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.6,
                  r: 2.2,
                  colorStops: [
                    {
                      offset: 1,
                      color: "#20A9DF", // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "#20A9DF", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false,
                },
                borderColor: "#021D35", // 鼠标移动到省份边框颜色
                borderWidth: 2,
              },
              emphasis: {
                areaColor: "#20A9DF", // 鼠标移动到省份显示的颜色
                shadowBlur: 15,
                borderWidth: 1,
                shadowColor: "#20A9DF", // 鼠标移动地图周围阴影
              },
            },
          },
          series: [
            // 地图上坐标点设置
            {
              name: "dot",
              type: "effectScatter",
              coordinateSystem: "geo",
              data: list,
              symbolSize: function (value, params) {
                if (params.name == "苏州市" || params.name == "重庆市") {
                  return 15;
                } else {
                  return 8;
                }
              },
              encode: {
                value: 2,
              },
              showEffectOn: "render",
              hoverAnimation: true,
              rippleEffect: {
                brushType: "stroke",
              },
              label: {
                show: true,
                formatter: function (params) {
                  if (params.name == "苏州市") {
                    return "苏州市";
                  }
                  if (params.name == "重庆市") {
                    return "重庆市";
                  }
                  return "";
                },
                position: "top",
                color: "#F0F8FA",
                fontSize: 12,
              },
              emphasis: {
                label: {
                  show: true,
                  position: "top",
                  formatter: function (params) {
                    return params.name;
                  },
                },
              },
              itemStyle: {
                color: function (params) {
                  if (params.name == "苏州市" || params.name == "重庆市") {
                    return "#95F204";
                  } else {
                    return "#F59A23";
                  }
                },
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
          ],
        };
        _this.echart_map.setOption(option);
      }
    },
    // 客户分布
    render_cd(xList, yList) {
      const _this = this;
      // 手动清除实例对象，防止内存泄漏
      if (_this.echart_cd) {
        _this.echart_cd.dispose();
        _this.echart_cd = null;
      }

      let dom = document.getElementById("customer_distribute");
      if (dom) {
        _this.echart_cd = echarts.init(dom);
        // 指定图标配置项和数据
        let option = {
          title: false,
          // 提示框
          tooltip: {
            trigger: "axis", // 数据项图形触发
            axisPointer: {
              // 指示样式
              type: "shadow",
            },
          },
          // grid 区域
          grid: {
            top: 24,
            left: 85,
            right: 24,
            bottom: 34,
            width: "auto",
            height: "auto",
          },
          // X 轴
          xAxis: {
            type: "value", // 轴类型
            minInterval: 1, // 控制最小刻度的代码
            axisLine: {
              // 坐标轴  轴线
              show: false, // 是否显示
            },
            axisLabel: {
              textStyle: {
                color: "#C7CDD3",
              },
            },
            splitLine: {
              show: true, // 坐标轴分割线显示
            },
          },
          // Y 轴
          yAxis: {
            type: "category", // 轴类型, 默认是:"category"
            minInterval: 1, // 控制最小刻度的代码
            data: yList,
            axisLine: {
              // 坐标轴轴线
              //  线
              lineStyle: {
                color: "#3D4D5B",
                width: 1,
                type: "solid",
              },
            },
            // 坐标轴标签
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
              },
              formatter: function (value) {
                if (value.length > 6) {
                  return value.substring(0, 5) + "...";
                } else {
                  return value;
                }
              },
            },
          },
          // 内容数量
          series: [
            {
              type: "bar",
              data: xList,
              barWidth: 16,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: "#008080",
                    },
                    {
                      offset: 0,
                      color: "#00FBFB",
                    },
                  ]),
                },
              },
              label: {
                show: false,
              },
            },
          ],
        };
        _this.echart_cd.setOption(option);
      }
    },
    // 设备分布
    render_dd(xList, yList) {
      const _this = this;
      // 手动清除实例对象，防止内存泄漏
      if (_this.echart_dd) {
        _this.echart_dd.dispose();
        _this.echart_dd = null;
      }

      let dom = document.getElementById("device_distribute");
      if (dom) {
        _this.echart_dd = echarts.init(dom);
        let option = {
          title: false,
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            top: 24,
            left: 85,
            right: 24,
            bottom: 34,
            width: "auto",
            height: "auto",
          },
          xAxis: {
            type: "value",
            minInterval: 1, // 控制最小刻度的代码
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#C7CDD3",
              },
            },
            splitLine: { show: true },
          },
          yAxis: {
            type: "category",
            minInterval: 1, // 控制最小刻度的代码
            data: yList,
            axisLine: {
              lineStyle: {
                color: "#3D4D5B",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              formatter: function (value) {
                if (value.length > 6) {
                  return value.substring(0, 5) + "...";
                } else {
                  return value;
                }
              },
            },
          },
          series: [
            {
              type: "bar",
              data: xList,
              barWidth: 16,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: "#008080",
                    },
                    {
                      offset: 0,
                      color: "#00FBFB",
                    },
                  ]),
                },
              },
              label: {
                show: false,
              },
            },
          ],
        };
        _this.echart_dd.setOption(option);
      }
    },
    // 设备状态台数
    render_dsd() {
      const _this = this;
      // 手动清除实例对象，防止内存泄漏
      if (_this.echart_dsd) {
        _this.echart_dsd.dispose();
        _this.echart_dsd = null;
      }

      let dom = document.getElementById("device_status_distribute");
      if (dom) {
        _this.echart_dsd = echarts.init(dom);
        let option = {
          // 设置饼状图每个颜色块的颜色
          color: ["#8FEB5B", "#FFFF00", "#0000FF", "#D7D7D7", "#D9001B"],
          legend: {
            data: ["运行", "空闲", "调试", "关机", "报警"],
            bottom: 4,
            left: "center",
            textStyle: {
              color: "#ffffff",
            },
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "60%"],
              center: ["50%", "50%"],
              label: {
                formatter: "{b|{b}}\n{c|{c}}{per|({d}%)}",
                rich: {
                  b: {
                    fontSize: 12,
                    fontWeight: "bold",
                    lineHeight: 26,
                    fontWeight: "bold",
                    color: "#fff",
                  },
                  c: {
                    fontSize: 12,
                    color: "#fff",
                  },
                  per: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
              },
              labelLine: {
                length: 10,
                length2: 10,
              },
              data: [
                { value: 100, name: "运行" },
                { value: 100, name: "空闲" },
                { value: 100, name: "调试" },
                { value: 100, name: "关机" },
                { value: 100, name: "报警" },
              ],
            },
          ],
        };
        _this.echart_dsd.setOption(option);
      }
    },
  },
  beforeDestroy() {
    let { timerX, timerY } = this;
    clearInterval(timerX);
    clearInterval(timerY);
  },
};
</script>
<style lang="less" scoped>
.canvas {
  height: 100%;
}
.map {
  height: calc(~"100vh - 350px");
}
.testdiv {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  background-image: url("../../../static/images/u0.png");
  background-size: 100% 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  .top_title {
    width: 100%;
    height: 105px;
    background: url("../../../static/images/u2.png") center center no-repeat;
    background-size: 100% 100%;
    padding: 0 40px;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    font-size: 60px;
    color: #fff;
    font-weight: bold;
    line-height: 90px;
    position: relative;
    font-style: italic;

    .logo {
      width: 200px;
      height: 60px;
      position: absolute;
      left: 40px;
      margin-top: 30px;
      cursor: pointer; // 鼠标样式修改
    }
  }
  .container {
    clear: both;
    width: 100%;
    // padding: 15px 13px 22px 20px;
    padding: 12px 14px;
    box-sizing: border-box;
    .formBox_left {
      width: 25%;
      float: left;
      .formBox {
        margin-bottom: 10px;
        .form_title {
          width: 100%;
          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: 44px;
          box-sizing: border-box;
          margin-bottom: 10px;
        }
        .table_bg {
          height: 250px;
          padding: 5px;
          background: url("../../../static/images/u9.png") center center
            no-repeat;
          background-size: 100% 100%;
        }
        .table_bottom {
          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;
          .ssRow > div {
            width: 100%;
            .ssIndex {
              display: inline-block;
              width: 49px;
              text-align: center;
              color: #d08226;
              // margin-right: 12px;
              position: relative;
              .ssHorn {
                position: absolute;
                width: 10px;
                height: 10px;
              }
              .ssIndexLT {
                left: 0;
                top: 12px;
                border-left: 2px solid #d08226;
                border-top: 2px solid #d08226;
              }
              .ssIndexLB {
                left: 0;
                bottom: 12px;
                border-left: 2px solid #d08226;
                border-bottom: 2px solid #d08226;
              }
              .ssIndexRT {
                right: 0;
                top: 12px;
                border-right: 2px solid #d08226;
                border-top: 2px solid #d08226;
              }
              .ssIndexRB {
                right: 0;
                bottom: 12px;
                border-right: 2px solid #d08226;
                border-bottom: 2px solid #d08226;
              }
              .ssIndex_bg {
                display: inline-block;
                width: 25px;
                height: 25px;
                line-height: 25px;
                background-color: #2a3032;
              }
            }
          }
          .tbaleSlide {
            height: 255px;
            overflow: hidden;
            .tableDetail {
              height: auto;
              li {
                width: 100%;
                color: #b1e2ff;
                height: 49px;
                display: flex;
                align-items: center;
                overflow: hidden;
                div {
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  margin: 0 12px;
                  line-height: 49px;
                  font-size: 14px;
                  height: 49px;
                }
              }
            }
          }
        }
      }
    }
    .formBox_middle {
      width: 50%;
      float: left;
      padding: 0 14px;
      .middle_top {
        width: 100%;
        padding: 0 24px;
        ul {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          color: #fff;
          font-size: 24px;
          li {
            width: 25%;
            text-align: center;
            font-style: italic;
            font-weight: bold;
            div {
              font-size: 40px;
              font-weight: normal;
              font-family: "DS-DIGII";
              background: url(../../../static/images/u487.png);
              background-size: 100% 100%;
            }
          }
        }
      }
      .middle_bottom {
        width: 100%;
      }
    }
    .formBox_right {
      width: 25%;
      float: right;
      .formBox {
        margin-bottom: 10px;
        .form_title {
          width: 100%;
          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: 44px;
          box-sizing: border-box;
          margin-bottom: 10px;
        }
        .formMain {
          width: 100%;
          box-sizing: border-box;
        }
        .table_bg {
          height: 256px;
          background: url("../../../static/images/u9.png") center center
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
// 以下样式不需要修改
::-webkit-scrollbar {
  display: none;
}
@font-face {
  font-family: "DS-DIGII";
  src: url(../../../static/font/DS-DIGI.TTF) format("truetype");
}
</style>
