shuiwu/src/system/IOT/positionControl/index.vue

<template>
  <div class="control">
    <div class="bg_header">
      <img src="@/assets/controlPanel/icon/bgheader3.png" alt="" />
      <div class="header-handle">
        <div><weather /></div>
        <div>
          <a-dropdown
            class="dropdown-link"
            overlayClassName="site-custom__classname"
          >
            <a class="ant-dropdown-link" @click.prevent>
              <div class="siteinfo1">
                <span style="margin-right: 25rem"
                  ><EnvironmentOutlined />{{ nowAccount.sitename }}</span
                >
                <span style="margin-right: 10rem">{{ nowAccount.name }}</span>
                <DownOutlined />
              </div>
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item v-for="item in accountList" :key="item.index">
                  <a @click="accountItemClick(item, false)">{{
                    item.sitename + "-" + item.name
                  }}</a>
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item>
                  <LogoutOutlined />
                  <a class="color-red" @click="loginOut">&nbsp;退出登录</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          <a-button
            type="primary"
            size="small"
            @click="router.push('/controlPanel')"
            style="position: absolute; right: 20rem; bottom: 0"
            >退出</a-button
          >
        </div>
      </div>
    </div>
    <div class="control_content">
      <div class="control_content-left">
        <ContentBox>
          <div class="header">
            <span>告警记录</span>
            <a-button
              type="primary"
              size="small"
              @click="goPage('/warningHistory')"
              >进入</a-button
            >
          </div>
          <div class="history-statistice">
            <div>
              <div class="history-item">
                <span class="normal-title">今日告警量</span>
                <span>{{ data.dataAll.today_total }}</span>
              </div>
              <div class="history-item">
                <span class="normal-title">未处理</span>
                <span>{{ data.dataAll.today_undeal }}</span>
              </div>
              <div class="history-item">
                <span class="normal-title">已处理</span>
                <span>{{ data.dataAll.today_deal }}</span>
              </div>
            </div>
          </div>
          <div class="history-wrapper" v-load-directive="warningLoad">
            <div
              :class="[{ move: warningMove }, { 'history-list': true }]"
              @mouseenter="warningClose"
              @mouseleave="warningScrollUp"
              v-if="data.warningHistory.length"
            >
              <div
                class="history-item"
                v-for="(item, index) in data.warningHistory"
                :key="index"
              >
                <a-tooltip>
                  <template #title>
                    <span>{{ item.devicename }}</span>
                  </template>
                  <span>{{ item.devicename }}</span>
                </a-tooltip>
                <a-tooltip>
                  <template #title>
                    <span>{{ item.eventname }}</span>
                  </template>
                  <span>{{ item.eventname }}</span>
                </a-tooltip>
                <span
                  :style="{
                    color: baseSet.styleObj(
                      eventlevelList.filter(
                        (v) => v.value == item.lasteventlevel
                      )[0]
                        ? eventlevelList.filter(
                            (v) => v.value == item.lasteventlevel
                          )[0].remarks
                        : ''
                    ).color,
                  }"
                  >{{
                    eventlevelList.filter(
                      (v) => v.value == item.lasteventlevel
                    )[0]
                      ? eventlevelList.filter(
                          (v) => v.value == item.lasteventlevel
                        )[0].remarks
                      : ""
                  }}</span
                >
                <span>{{ item.lasteventtime }}</span>
              </div>
            </div>
            <a-empty :image="simpleImage" v-else>
              <template #description>
                <span style="color: #ffffff">暂无数据</span>
              </template>
            </a-empty>
          </div>
        </ContentBox>
        <ContentBox>
          <div class="header">
            <span>本周告警统计</span>
            <a-button
              type="primary"
              size="small"
              @click="goPage('/warningControl', 'valvesystem')"
              >进入</a-button
            >
          </div>
          <div class="history-statistice">
            <div>
              <div class="history-item">
                <span class="normal-title">本周告警量</span>
                <span>{{ data.dataAll.week_total }}</span>
              </div>
              <div class="history-item">
                <span class="normal-title">紧急</span>
                <span>{{ data.dataAll.week_emergent }}</span>
              </div>
              <div class="history-item">
                <span class="normal-title">重要</span>
                <span>{{ data.dataAll.week_important }}</span>
              </div>
            </div>
          </div>
          <div class="map" ref="map"></div>
        </ContentBox>
      </div>
      <div class="control_content-center">
        <ContentBox>
          <div class="header">
            <span>设备监控</span>
            <a-button
              type="primary"
              size="small"
              @click="goPage('/equipmentManage')"
              >进入</a-button
            >
          </div>
          <div class="device-statistice">
            <div class="device-item">
              <div class="left">
                <span>设备数</span>
                <span>{{ data.dataAll.device_total }}</span>
              </div>
              <div class="right">
                <img src="@/assets/controlPanel/icon/设备数.png" alt="" />
              </div>
            </div>
            <div class="device-item">
              <div class="left">
                <span>在线数</span>
                <span>{{ data.dataAll.device_online }}</span>
              </div>
              <div class="right">
                <img src="@/assets/controlPanel/icon/在线数.png" alt="" />
              </div>
            </div>
            <div class="device-item">
              <div class="left">
                <span>异常数</span>
                <span>{{ data.dataAll.device_abnormal }}</span>
              </div>
              <div class="right">
                <img src="@/assets/controlPanel/icon/异常数.png" alt="" />
              </div>
            </div>
          </div>
          <devices systemname='valvesystem' />
        </ContentBox>
      </div>
      <div class="control_content-right">
        <ContentBox>
          <div class="header">
            <span>待接收的命令</span>
          </div>
          <div class="info-wrapper" v-load-directive="cmdLoad">
            <div class="info-list" v-if="data.cmdList.length">
              <template v-for="item in data.cmdList">
                <div
                  class="info-item"
                  v-for="(item2, index) in item.content"
                  :key="index"
                >
                  <a-tooltip>
                    <template #title>
                      <span>{{ item.createdate }}</span>
                    </template>
                    <span>{{ item.createdate }}</span>
                  </a-tooltip>
                  <a-tooltip>
                    <template #title>
                      <span>{{ item.devicename }}</span>
                    </template>
                    <span>{{ item.devicename }}</span>
                  </a-tooltip>
                  <a-tooltip>
                    <template #title>
                      <span>{{ item2.title }}：{{ item2.value }}</span>
                    </template>
                    <span>{{ item2.title }}：{{ item2.value }}</span>
                  </a-tooltip>
                </div>
              </template>
            </div>
            <a-empty :image="simpleImage" v-else>
              <template #description>
                <span style="color: #ffffff">暂无数据</span>
              </template>
            </a-empty>
          </div>
        </ContentBox>
        <ContentBox>
          <div class="header">
            <span>操作记录</span>
          </div>
          <div class="handle-wrapper" v-load-directive="handleLoad">
            <div
              :class="[{ move: move }, { 'handle-list': true }]"
              @mouseenter="close"
              @mouseleave="scrollUp"
              v-if="data.handleHistory.length"
            >
              <div
                class="info-item"
                v-for="(item, index) in data.handleHistory"
                :key="index"
              >
                <a-tooltip>
                  <template #title>
                    <span>{{ item.createdate }}</span>
                  </template>
                  <span>{{ item.createdate }}</span>
                </a-tooltip>
                <a-tooltip>
                  <template #title>
                    <span>{{ item.devicename }}</span>
                  </template>
                  <span>{{ item.devicename }}</span>
                </a-tooltip>
                <a-tooltip>
                  <template #title>
                    <span>{{ item.title }}：{{ item.value }}</span>
                  </template>
                  <span>{{ item.title }}：{{ item.value }}</span>
                </a-tooltip>
              </div>
            </div>
            <a-empty :image="simpleImage" v-else>
              <template #description>
                <span style="color: #ffffff">暂无数据</span>
              </template>
            </a-empty>
          </div>
        </ContentBox>
      </div>
    </div>
  </div>
</template>

<script setup>
import weather from "@/components/weather/index.vue";
import devices from "../pressureControl/modules/devices.vue"
import { Empty, Modal } from "ant-design-vue";
import {
  EnvironmentOutlined,
  DownOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
import baseSet from "../warningControl/baseSet.js";
import ContentBox from "../pressureControl/modules/Box.vue";
import { Line } from "@antv/g2plot";
import {
  ref,
  defineProps,
  defineEmits,
  onMounted,
  onUnmounted,
  onBeforeMount,
  onDeactivated,
  watch,
  createVNode,
} from "vue";
import Api from "@/api/api";
import utils from "@/utils/utils";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import { useRouteTabsStore } from "@/stores/modules/Htabs";
import { useAuthStore } from "@/stores/modules/auth";
import { storeToRefs } from "pinia";
const store = useAuthStore();
let { system, mods, actSystem, openKeys, app, accountList, nowAccount } =
  storeToRefs(store);

const rotTabs = useRouteTabsStore();
let { historyRoutes } = storeToRefs(rotTabs);
const emit = defineEmits([]);
const router = useRouter();
let map = ref();
let line = ref();
let eventlevelList = ref([]);
let loading = ref(false);

let timer = ref();
let move = ref(false);

const accountItemClick = (account, bool) => {
  store.defaultAccount(account, () => {
    store.reloadPage();
    setTimeout(() => {
      getBaseInfo();
      historyDataFun();
      isRefresh.value = true;
    }, 1500);
    // historyRoutes.value = []
  });
  if (!bool) {
    if (router.currentRoute.value.meta.isDetail) {
      router.go(-1);
    }
  } else {
    router.go(0);
  }
};

const loginOut = () => {
  Modal.confirm({
    title: "注意",
    icon: createVNode(ExclamationCircleOutlined),
    content: "确定登出当前账号吗?",
    okText: "确认",
    cancelText: "取消",
    onOk() {
      historyRoutes.value = [];
      Api.loginout({});
      router.push({ path: "/" });
    },
  });
};

let goPage = (path, name) => {
  if (name) {
    router.push({ path: path, query: { systemname: name } });
  } else {
    router.push(path);
  }
  setTimeout(() => {
    console.log(system.value, app.value);
    let result;
    system.value.forEach((item) => {
      item.modules.forEach((item2) => {
        if (item2.systemmoduleid == app.value.systemmoduleid) {
          result = item;
        }
      });
    });
    actSystem.value = result;
    store.modulesData(result);
    openKeys.value.push(result.modules[0].apps[0].systemmoduleid);
  });
};

let calcSizeFun = () => {
  let baseSize = 1920;
  console.log(document.body.clientWidth);
  document.querySelector("html").style.fontSize = `${100 / baseSize}vw`;
};

let scrollUp = () => {
  timer.value = setInterval(() => {
    let wrapper = document.querySelector(".handle-wrapper").clientHeight;
    let list = document.querySelector(".handle-list").clientHeight;
    if (list < wrapper) return;
    move.value = true;
    setTimeout(() => {
      data.value.handleHistory.push(data.value.handleHistory.shift());
      move.value = false;
    }, 500);
  }, 2000);
};

let close = () => {
  clearInterval(timer.value);
};

let warningMove = ref(false);
let timer2 = ref();
let warningScrollUp = () => {
  timer2.value = setInterval(() => {
    let wrapper = document.querySelector(".history-wrapper").clientHeight;
    let list = document.querySelector(".history-list").clientHeight;
    if (list < wrapper) return;
    warningMove.value = true;
    setTimeout(() => {
      data.value.warningHistory.push(data.value.warningHistory.shift());
      warningMove.value = false;
    }, 500);
  }, 2000);
};

let warningClose = () => {
  clearInterval(timer2.value);
};

/* 数据变量 */
let data = ref({
  dataAll: {},
  warningMapData: [],
  warningHistory: [],
  deviceList: [],
  handleHistory: [],
  cmdList: [],
});

let warningParam = ref({
  id: 20230914133102,
  content: {
    systemname: "valvesystem",
    pageNumber: 1,
    pageSize: 30,
  },
});


let cmdParam = ref({
  id: 20230914133402,
  content: {
    systemname: "valvesystem",
    pageNumber: 1,
    pageSize: 10,
  },
});

let handleParam = ref({
  id: 20230914133502,
  content: {
    systemname: "valvesystem",
    pageNumber: 1,
    pageSize: 30,
  },
});

let listData = async () => {
  let res = await Api.requested({
    id: 20230914133002,
    content: { systemname: "valvesystem" },
  });
  data.value.dataAll = res.data;
  console.log(data.value.dataAll, "数据统计");

  let res3 = await Api.requested({
    id: 20230914133202,
    content: { systemname: "valvesystem" },
  });
  data.value.warningMapData = res3.data;
  data.value.warningMapData.forEach((item) => (item.次数 = item.count));
  line.value.changeData(data.value.warningMapData);
  console.log(data.value.warningMapData, "告警统计");
};

let deviceClick = (data) => {
  router.push({
    path: "/" + (data.dashboardpath || "baseDevice"),
    query: {
      id: data.w_deviceid,
    },
  });
};

let warningTotalPage = ref(0);
let warningLoad = () => {
  console.log("触发");
  if (
    warningParam.value.content.pageNumber == warningTotalPage.value ||
    loading.value == true
  )
    return;
  warningParam.value.content.pageNumber += 1;
  console.log(warningParam.value);
  getwarningData();
};

let getwarningData = async () => {
  loading.value = true;
  let res = await Api.requested(warningParam.value);
  data.value.warningHistory =
    warningParam.value.content.pageNumber == 1
      ? res.data
      : data.value.warningHistory.concat(res.data);
  data.value.warningHistory.forEach((item) => {
    item.lasteventtime = item.lasteventtime.slice(5, item.lasteventtime.length);
  });
  warningTotalPage.value = res.pageTotal;
  setTimeout(() => {
    loading.value = false;
  }, 1500);
  console.log(data.value.warningHistory, "告警记录");
};

let cmdTotalPage = ref(0);
let cmdLoad = () => {
  if (
    cmdParam.value.content.pageNumber == cmdTotalPage.value ||
    loading.value == true
  )
    return;
  cmdParam.value.content.pageNumber += 1;
  console.log(cmdParam.value);
  getCmdData();
};

let getCmdData = async () => {
  loading.value = true;
  let res = await Api.requested(cmdParam.value);
  data.value.cmdList =
    cmdParam.value.content.pageNumber == 1
      ? res.data
      : data.value.cmdList.concat(res.data);
  data.value.cmdList.forEach((item) => {
    item.createdate = item.createdate.slice(5, item.createdate.length);
  });
  cmdTotalPage.value = res.pageTotal;
  setTimeout(() => {
    loading.value = false;
  }, 1500);
  console.log(data.value.cmdList, "cmd列表");
};

let handleTotalPage = ref(0);
let handleLoad = () => {
  if (
    handleParam.value.content.pageNumber == handleTotalPage.value ||
    loading.value == true
  )
    return;
  handleParam.value.content.pageNumber += 1;
  console.log(handleParam.value);
  getHanleData();
};

let getHanleData = async () => {
  loading.value = true;
  let res = await Api.requested(handleParam.value);
  // data.value.handleHistory = handleParam.value.content.pageNumber == 1 ? res.data : data.value.handleHistory.concat(res.data)
  res.data.forEach((item) => {
    item.content.forEach((item2) => {
      data.value.handleHistory.push({
        devicename: item.devicename,
        createdate: item.createdate.slice(5, item.createdate.length),
        title: item2.title,
        value: item2.value,
      });
    });
  });
  handleTotalPage.value = res.pageTotal;
  setTimeout(() => {
    loading.value = false;
  }, 1000);
  console.log(data.value.handleHistory, "操作记录");
};

let initChart = () => {
  line.value = new Line(map.value, {
    data: data.value.warningMapData,
    xField: "date",
    yField: "次数",
    yAxis: {
      label: {
        style: {
          fill: "#ffffff",
        },
      },
    },
    xAxis: {
      label: {
        style: {
          fill: "#ffffff",
        },
      },
    },
    color: ["#16FFF6", "rgba(255, 164, 6)"],
    legend: {
      position: "bottom",
      itemName: {
        style: {
          fill: "#ffffff",
        },
      },
    },
    tooltip: {
      // formatter:(v) => {
      //   return {name:v.paramname,value:v.value + chartData.value.find(item => item.paramname == v.paramname).unit}
      // }
    },
    area: {
      style: {
        fillOpacity: 0.15,
      },
    },
    // @TODO 后续会换一种动画方式
    animation: {
      appear: {
        animation: "path-in",
        duration: 3000,
      },
    },
  });
  line.value.render();
};

let vLoadDirective = {
  mounted(el, binding) {
    let tableWarp = el;
    function handleFun(e) {
      if (
        tableWarp.scrollTop + tableWarp.clientHeight >=
        tableWarp.scrollHeight
      ) {
        binding.value();
      }
    }
    tableWarp.addEventListener("scroll", handleFun);
    el.tableWarp = tableWarp;
    el.handleFun = handleFun;
  },
  unmounted(el) {
    el.tableWarp.removeEventListener("scroll", el.handleFun);
  },
};

onMounted(async () => {
  calcSizeFun();
  initChart();
  listData();
  getCmdData();
  getHanleData();
  getwarningData();
  scrollUp();
  warningScrollUp();
  const res = await Api.optionstype("eventlevel");
  eventlevelList.value = res.data;
  console.log("警告等级", eventlevelList.value);
  console.log(router.currentRoute.value.path);
});

router.beforeEach((to, from, next) => {
  clearInterval(timer2.value);
  clearInterval(timer.value);
  next();
});
</script>

<style>
.site-custom__classname .ant-dropdown-menu {
  background: rgba(5, 54, 178, 0.7) !important;
  color: #ffffff !important;
  padding: 0 !important;
}
.site-custom__classname .ant-dropdown-menu-item {
  color: #ffffff !important;
}
.site-custom__classname .ant-dropdown-menu-item:hover {
  background: rgba(5, 54, 178, 0.1) !important;
}
</style>
<style scoped>
.header-handle {
  padding: 0 40rem;
  transform: translateY(-20rem);
  display: flex;
  justify-content: space-between;
}
.weather-panel {
  font-size: 14rem;
  font-weight: bold;
}
.ant-btn-primary {
  background: rgb(20, 49, 125) !important;
  border-color: rgb(20, 49, 125) !important;
}
/deep/.weather-panel .white {
  display: none;
}
/deep/.weather-panel span:nth-child(2) {
  margin-right: 15rem;
}
/deep/.weather-panel span:nth-child(3) {
  margin-right: 3rem;
}
/deep/.weather-panel span:nth-child(4) {
}
/deep/.weather-panel span:last-child {
}
.siteinfo1 {
  color: #ffffff !important;
  font-size: 14rem;
  font-weight: bold;
  z-index: 999999;
  margin-right: 40rem;
}
.normal-title {
  font-size: 16rem;
  color: #ffffff;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14rem;
  font-weight: bold;
  margin-bottom: 20rem;
}
* {
  box-sizing: border-box;
}
.control {
  width: 100%;
  height: 100vh;
  background: #02004d;
  color: #ffffff;
  --color1: #16fff6;
  --color2: rgba(255, 164, 6);
  overflow: hidden;
}
.control .bg_header {
  position: relative;
}
.control .bg_header img {
  width: 100%;
}

.control .control_content {
  width: 100%;
  height: calc(100vh - 110rem);
  margin-top: 10rem;
  padding: 0 10rem 10rem 10rem;
  display: flex;
}
.control .control_content .control_content-left {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.control .control_content .control_content-left .content_box {
  height: 50%;
}
.control .control_content .control_content-left .content_box:first-child {
  margin-bottom: 15rem;
}
.control .control_content .control_content-left .history-statistice {
  display: flex;
}
.control .control_content .control_content-left .history-statistice > div {
  margin: 0 auto;
  display: flex;
}
.control
  .control_content
  .control_content-left
  .history-statistice
  .history-item {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-right: 20rem;
}

.control
  .control_content
  .control_content-left
  .history-statistice
  .history-item
  span:last-child {
  color: var(--color2);
  font-size: 16rem;
  font-weight: bold;
}
.control .control_content .control_content-left .history-wrapper {
  height: calc(100% - 110rem);
  overflow-y: scroll;
  margin-top: 15rem;
  padding-bottom: 15rem;
}
::-webkit-scrollbar {
  display: none;
}
.control .control_content .control_content-left .history-wrapper .history-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rem;
  cursor: pointer;
}
.control
  .control_content
  .control_content-left
  .history-wrapper
  .history-item:last-child {
  margin: 0;
}
.control
  .control_content
  .control_content-left
  .history-wrapper
  .history-item:hover {
  background: rgba(255, 255, 255, 0.4);
}

.control
  .control_content
  .control_content-left
  .history-wrapper
  .history-item
  span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.control
  .control_content
  .control_content-left
  .history-wrapper
  .history-item
  span:nth-child(1) {
  flex: 1;
}
.control
  .control_content
  .control_content-left
  .history-wrapper
  .history-item
  span:nth-child(2) {
  flex: 1;
}
.control
  .control_content
  .control_content-left
  .history-wrapper
  .history-item
  span:nth-child(3) {
  flex: 0.5;
}
.control
  .control_content
  .control_content-left
  .history-wrapper
  .history-item
  span:nth-child(4) {
  flex: 1;
}
.control .control_content .control_content-left .map {
  height: calc(100% - 120rem);
}
.control .control_content .control_content-center {
  flex: 1.5;
  height: 100%;
  min-width: 565rem;
}
.control .control_content .control_content-center .device-statistice {
  display: flex;
  justify-content: space-between;
  margin: 15rem;
}
.control
  .control_content
  .control_content-center
  .device-statistice
  .device-item {
  display: flex;
  flex: 1;
  justify-content: space-between;
  border: 1rem solid var(--color1);
  margin-right: 20rem;
  padding: 10rem 20rem;
  color: var(--color1);
}
.siteinfo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.siteinfo .siteinfo-wrapper {
  display: flex;
  align-items: center;
  align-self: flex-start;
  width: 100%;
  background: #40a9ff;
}
.siteinfo span {
  margin-left: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14rem;
}
.control
  .control_content
  .control_content-center
  .device-statistice
  .device-item:last-child {
  margin: 0;
}
.control
  .control_content
  .control_content-center
  .device-statistice
  .device-item
  .left {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.control
  .control_content
  .control_content-center
  .device-statistice
  .device-item
  .left
  span:last-child {
  color: var(--color2);
  font-size: 16rem;
  font-weight: bold;
}
.control
  .control_content
  .control_content-center
  .device-statistice
  .device-item
  .right {
  width: 50rem;
  height: 50rem;
  display: flex;
  align-items: center;
}
.control
  .control_content
  .control_content-center
  .device-statistice
  .device-item
  .right
  img {
  width: 100%;
  margin-bottom: 0 !important;
}
.control .control_content .control_content-center .device-wrapper {
  overflow-y: scroll;
  height: calc(100% - 180rem);
  margin-top: 40rem;
}
.control .control_content .control_content-center .device-wrapper .device-list {
  display: flex;
  flex-wrap: wrap;
}
.control
  .control_content
  .control_content-center
  .device-wrapper
  .device-list
  .used {
  display: inline-block;
  width: 10rem;
  height: 10rem;
  border-radius: 10rem;
  background: var(--icon);
  margin-right: 10rem;
}
.control
  .control_content
  .control_content-center
  .device-wrapper
  .device-list
  .device-title {
  display: flex;
  align-items: center;
  height: 44rem;
  font-size: 14rem;
}
.control
  .control_content
  .control_content-center
  .device-wrapper
  .device-list
  .device-title,
img,
.status {
  margin-bottom: 10rem;
  font-size: 14rem;
}
.control
  .control_content
  .control_content-center
  .device-wrapper
  .device-list
  .device-title
  span {
  display: inline-block;
  width: 140rem;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.control
  .control_content
  .control_content-center
  .device-wrapper
  .device-list
  .content_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  padding: 0 25rem;
  margin-bottom: 15rem;
  cursor: pointer;
}
.control
  .control_content
  .control_content-center
  .device-wrapper
  .device-list
  .content_box:hover {
  --color: red !important;
}
.control
  .control_content
  .control_content-center
  .device-wrapper
  .device-list
  .content_box:hover
  img {
  transition: all 0.2s;
  transform: scale(1.2);
}
.control
  .control_content
  .control_content-center
  .device-wrapper
  .device-list
  .i {
  width: 20rem;
  height: 20rem;
  border-radius: 20rem;
  background: red;
}
.control
  .control_content
  .control_content-center
  .device-wrapper
  .device-list
  img {
  width: 100%;
  max-height: 70rem;
}
.control
  .control_content
  .control_content-center
  .device-wrapper
  .device-list
  .status {
  color: var(--color2);
}
.control .control_content .control_content-center .content_box {
  height: 100%;
  margin: 0 18rem;
  width: auto !important;
  flex: 1;
}
.control .control_content .control_content-center .device-list .content_box {
  flex: 1 !important;
  max-width: 212rem;
}
.control .control_content .control_content-right {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.control .control_content .control_content-right .content_box:first-child {
  margin-bottom: 15rem;
  height: 35%;
}
.control .control_content .control_content-right .content_box:last-child {
  height: 65%;
}
.control .control_content .control_content-right .info-wrapper {
  height: calc(100% - 30rem);
  overflow-y: scroll;
}
.control .control_content .control_content-right .info-wrapper .info-list {
}
.control
  .control_content
  .control_content-right
  .info-wrapper
  .info-list
  .info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rem;
  cursor: pointer;
}
.control
  .control_content
  .control_content-right
  .info-wrapper
  .info-list
  .info-item:hover {
  background: rgba(255, 255, 255, 0.4);
}
.control
  .control_content
  .control_content-right
  .info-wrapper
  .info-list
  .info-item
  span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.control
  .control_content
  .control_content-right
  .info-wrapper
  .info-list
  .info-item
  span:nth-child(1) {
  flex: 1;
}
.control
  .control_content
  .control_content-right
  .info-wrapper
  .info-list
  .info-item
  span:nth-child(2) {
  flex: 1;
}
.control
  .control_content
  .control_content-right
  .info-wrapper
  .info-list
  .info-item
  span:nth-child(3) {
  flex: 2;
}
.control
  .control_content
  .control_content-right
  .info-wrapper
  .info-list
  .info-item
  span:nth-child(1) {
  color: var(--color1);
}
.control
  .control_content
  .control_content-right
  .info-wrapper
  .info-list
  .info-item
  span:nth-child(2) {
  color: var(--color2);
}

.control .control_content .control_content-right .handle-wrapper {
  height: calc(100% - 30rem);
  overflow-y: scroll;
}
.control .control_content .control_content-right .handle-wrapper .handle-list {
}
.control
  .control_content
  .control_content-right
  .handle-wrapper
  .handle-list
  .info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rem;
  cursor: pointer;
}
.control
  .control_content
  .control_content-right
  .handle-wrapper
  .handle-list
  .info-item:hover {
  background: rgba(255, 255, 255, 0.4);
}
.control
  .control_content
  .control_content-right
  .handle-wrapper
  .handle-list
  .info-item
  span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.control
  .control_content
  .control_content-right
  .handle-wrapper
  .handle-list
  .info-item
  span:nth-child(1) {
  flex: 1;
}
.control
  .control_content
  .control_content-right
  .handle-wrapper
  .handle-list
  .info-item
  span:nth-child(2) {
  flex: 1;
}
.control
  .control_content
  .control_content-right
  .handle-wrapper
  .handle-list
  .info-item
  span:nth-child(3) {
  flex: 2;
}
.control
  .control_content
  .control_content-right
  .handle-wrapper
  .handle-list
  .info-item
  span:nth-child(1) {
  color: var(--color1);
}
.control
  .control_content
  .control_content-right
  .handle-wrapper
  .handle-list
  .info-item
  span:nth-child(2) {
  color: var(--color2);
}
.content_box {
  padding: 10rem 15rem;
}
.move {
  margin-top: -30rem;
  transition: all 0.5s ease-in-out;
}
</style>