<template>
  <div class="main_root">
    <div class="main_left">
      <div class="main_left_title">按班级</div>
      <div class="class_list">
        <div
          :class="['class_item', !searchForm.classid ? 'selceted' : '']"
          @click="classChange(null)"
        >
          全部班级
        </div>
        <div
          :class="[
            'class_item',
            searchForm.classid === classItem.id ? 'selceted' : ''
          ]"
          v-for="classItem in schoolInfo.classList"
          :key="classItem.id"
          @click="classChange(classItem.id)"
        >
          {{ classItem.name }}
        </div>
      </div>
    </div>
    <div class="main_right">
      <div class="search_header">
        <div class="search_left">
          <Select
            v-model="searchForm.atype"
            style="margin-right: 10px; width: 120px"
            placeholder="关注状态"
            @on-change="searchList()"
          >
            <Option :value="0">全部</Option>
            <Option :value="1">重点关注</Option>
            <Option :value="2">不关注</Option>
          </Select>
          <Input
            v-model="searchForm.name"
            placeholder="请输入登录账号、姓名、设备型号、设备号"
            search
            @on-search="searchList()"
            style="width: 310px"
          />
        </div>
        <div class="search_right">
          <Button
            type="primary"
            class="primary_btn"
            style="margin-right: 10px"
            @click="getList()"
            >刷新</Button
          >
          <Button
            type="primary"
            class="primary_btn"
            style="margin-right: 10px"
            @click="toDeviceExport()"
            >设备导出</Button
          >
          <Button
            type="primary"
            class="primary_btn"
            style="margin-right: 10px"
            @click="toInstallingAppExport()"
            >安装应用导出</Button
          >
          <Dropdown @on-click="dropdownSelected">
            <div class="drop_btn">
              其他操作<Icon type="ios-arrow-down" class="arrow_down" />
            </div>
            <DropdownMenu slot="list">
              <DropdownItem name="1">恢复出厂</DropdownItem>
              <DropdownItem name="2">发送消息</DropdownItem>
              <DropdownItem name="3" v-if="searchForm.classid"
                >整班发送消息</DropdownItem
              >
              <DropdownItem name="4">解除锁定</DropdownItem>
              <DropdownItem name="5">锁定</DropdownItem>
              <DropdownItem name="6">更新策略</DropdownItem>
              <DropdownItem name="7">重启设备</DropdownItem>
              <DropdownItem name="9">解除管控</DropdownItem>
              <DropdownItem name="10">解除绑定</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
      <div class="table_wrap">
        <Table
          ref="deviceTable"
          :columns="columns"
          :data="searchForm.list"
          @on-selection-change="selectionChange"
          @on-row-click="deviceTableRowClick"
        >
          <template slot-scope="{ row }" slot="loginnameSlot">
            <!-- lockState锁定状态0未锁定1已锁定 -->
            <div class="lock_img_box">
              {{ row.loginname
              }}<img
                v-if="row.lockState === 1"
                src="@/assets/img/locking.png"
              />
            </div>
          </template>
          <template slot-scope="{ row }" slot="onlineSlot">
            <!-- 1在线2离线 -->
            <div class="action_list">
              <div class="action_success" v-if="row.online === 1">在线</div>
              <div class="action_error" v-else-if="row.online === 2">离线</div>
            </div>
          </template>
          <template slot-scope="{ row }" slot="actionSlot">
            <div class="action_list" @click.stop>
              <div v-if="row.sn" @click="toView(row)">查看</div>
              <div @click="toStrategy(row)">策略</div>
              <div v-if="row.sn" @click="toPsw(row)">设备密码</div>
              <div v-if="row.sn" @click="toUnbind(row)">解除绑定</div>
            </div>
          </template>
        </Table>
      </div>
      <div class="page_wrap">
        <Page
          :transfer="true"
          :total="searchForm.total"
          :current="searchForm.page"
          :page-size="searchForm.size"
          :page-size-opts="[10, 20, 40, 60]"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
          show-total
          show-sizer
        ></Page>
      </div>
    </div>
    <Modal
      class="modal1"
      :mask-closable="false"
      v-model="controlMessageInfo.show"
      :title="controlMessageInfo.classid ? '整班发送消息' : '发送消息'"
    >
      <Form
        v-if="controlMessageInfo.show"
        ref="sendMsgForm"
        :model="controlMessageInfo"
        :rules="rules"
        :label-width="60"
      >
        <FormItem label="标题" prop="title">
          <Input
            v-model="controlMessageInfo.title"
            :maxlength="32"
            show-word-limit
            placeholder="请输入标题，不超过32个字符"
          ></Input>
        </FormItem>
        <FormItem label="内容" prop="content">
          <Input
            type="textarea"
            v-model="controlMessageInfo.content"
            :maxlength="255"
            show-word-limit
            placeholder="请输入内容"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="controlMessageInfo.show = false">取消</Button>
        <Button @click="controlSendMessage()" type="primary" class="primary_btn"
          >保存</Button
        >
      </div>
    </Modal>
    <Modal
      class="modal4"
      :mask-closable="false"
      v-model="devicePswInfo.show"
      title="设备密码"
    >
      <div class="device_psw">
        <div class="device_psw_title">设备密码</div>
        <div class="device_psw_num">{{ devicePswInfo.controlPwd }}</div>
        <div class="device_psw_title">注销密码</div>
        <div class="device_psw_num">{{ devicePswInfo.logoutPwd }}</div>
      </div>
      <div slot="footer" style="text-align: center">
        <Button @click="devicePswInfo.show = false">关闭</Button>
      </div>
    </Modal>
    <Modal
      class="modal5"
      :mask-closable="false"
      v-model="strategyInfo.show"
      :title="`策略【${strategyInfo.username}】`"
    >
      <div class="content" v-if="strategyInfo.show">
        <div class="strategy_list">
          <div class="strategy_title">
            <div>
              <span
                style="font-size: 26px"
                class="ivu-icon iconfont icon-shijian"
              ></span
              >时间限制策略
            </div>
          </div>
          <div style="margin-bottom: 10px" v-if="strategyInfo.hastime">
            <div class="showtime">
              <div
                style="line-height: 30px; font-size: 16px; margin-bottom: 10px"
              >
                设备生效时间
              </div>
              <div class="week">
                <div class="day" v-for="item in weekDay" :key="item.value">
                  <div class="day_title">{{ item.alias }}</div>
                  <div class="day_content">
                    <div
                      class="time"
                      v-for="(sItem, sIndex) in strategyPadTimes(item.value)"
                      :key="sIndex"
                    >
                      {{ sItem.starttime }} - {{ sItem.stoptime }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="nodata" v-else>未设置时间限制策略</div>
        </div>
        <div class="strategy_list">
          <div class="strategy_title">
            <div>
              <span class="ivu-icon iconfont icon-yingyongcelve"></span>应用策略
            </div>
          </div>
          <div class="strategy_content" v-if="strategyInfo.hasapp">
            <div class="strategy_top">
              <span>授权应用</span>
            </div>
            <div
              class="strategy_bottom"
              style="min-height: 160px"
              v-if="strategyInfo.padApps.length > 0"
            >
              <div
                class="app_list"
                v-for="item in strategyInfo.padApps"
                :key="item.appid"
                :title="item.appName"
              >
                <img :src="$api.baseImageUrl + item.appIcon" />
                <div class="appName">{{ item.appName }}</div>
              </div>
            </div>
          </div>
          <div class="nodata" v-else>未设置应用策略</div>
        </div>
        <div class="strategy_list">
          <div class="strategy_title">
            <div>
              <span class="ivu-icon iconfont icon-shezhi"></span>设备策略
            </div>
          </div>
          <div class="strategy_content" v-if="strategyInfo.hasdevice">
            <div class="strategy_top">
              <span>设备功能管理</span>
            </div>
            <div class="strategy_bottom" style="min-height: 160px">
              <div
                class="device_list"
                v-for="item in padDevices"
                :key="item.pdtype"
              >
                <div class="icon">
                  <span :class="[item.icon]"></span>
                </div>
                <div class="title">{{ item.pdtype }}</div>
                <i-switch
                  size="large"
                  :value="strategyInfo.pdtypeInfo[item.pdtype]"
                  :disabled="true"
                  :true-value="1"
                  :false-value="2"
                >
                  <span slot="open">开启</span>
                  <span slot="close">关闭</span>
                </i-switch>
              </div>
            </div>
          </div>
          <div class="nodata" v-else>未设置设备策略</div>
        </div>
        <div class="strategy_list">
          <div class="strategy_title">
            <div>
              <span
                style="font-size: 18px"
                class="ivu-icon iconfont icon-wifi"
              ></span
              >Wifi白名单策略
            </div>
          </div>
          <div class="strategy_content" v-if="strategyInfo.haswifi">
            <div class="strategy_top">
              <span>SSID</span>
            </div>
            <div class="strategy_bottom" style="min-height: 76px">
              <div
                class="padWifis"
                v-for="(item, index) in strategyInfo.padWifis"
                :key="index"
              >
                <div class="title">{{ item }}</div>
              </div>
            </div>
          </div>
          <div class="nodata" v-else>未设置Wifi白名单</div>
        </div>
        <div class="strategy_list">
          <div class="strategy_title">
            <div>
              <span class="ivu-icon iconfont icon-weiguiguanli"></span>违规处理
            </div>
          </div>
          <div style="border: 1px solid #ced9f2; border-bottom: none">
            <Table
              v-if="strategyInfo.hasviolate"
              class="table"
              :columns="violationColumns"
              :data="padViolates"
            >
              <template slot-scope="{ row }" slot="violationEvents">
                <Checkbox
                  :disabled="true"
                  class="checked"
                  :value="
                    Boolean(
                      strategyInfo.padViolatesInfo &&
                        strategyInfo.padViolatesInfo[row.violateType]
                    )
                  "
                ></Checkbox>
                <span
                  style="display: inline-block; width: 120px; text-align: left"
                  >{{ row.title }}</span
                >
              </template>
              <template slot-scope="{ row }" slot="noticed">
                <Checkbox
                  :disabled="true"
                  class="checked"
                  :value="
                    strategyInfo.padViolatesInfo &&
                    strategyInfo.padViolatesInfo[row.violateType] &&
                    strategyInfo.padViolatesInfo[row.violateType].noticed === 1
                  "
                  >通知管理员</Checkbox
                >
              </template>
              <template slot-scope="{ row }" slot="violationHandling">
                <CheckboxGroup
                  :value="
                    strategyInfo.padViolatesInfo &&
                    strategyInfo.padViolatesInfo[row.violateType] &&
                    strategyInfo.padViolatesInfo[row.violateType].handleMethod
                  "
                >
                  <Checkbox :disabled="true" label="锁定"></Checkbox>
                  <Checkbox :disabled="true" label="恢复出厂设置"></Checkbox>
                </CheckboxGroup>
              </template>
            </Table>
          </div>
          <div class="nodata" v-if="!strategyInfo.hasviolate">
            未设置违规处理
          </div>
        </div>
      </div>
      <div slot="footer" style="text-align: center">
        <Button @click="strategyInfo.show = false">关闭</Button>
      </div>
    </Modal>
    <Modal
      class="modal5"
      :mask-closable="false"
      v-model="deviceDetailInfo.show"
      :title="`查看【${deviceDetailInfo.username}】`"
    >
      <div class="section_title">基本信息</div>
      <div class="section_item">
        <div class="device_base">
          <div class="device_base_left">
            <div class="phone_dot"></div>
            <Icon
              class="ivu-icon iconfont icon-anzhuoandroid"
              color="#52C41A"
              size="45"
            ></Icon>
          </div>
          <div class="device_base_right">
            <Form :label-width="90">
              <FormItem label="使用人">{{
                deviceDetailInfo.detail.users[0] &&
                deviceDetailInfo.detail.users[0].username
              }}</FormItem>
              <FormItem label="型号">{{
                deviceDetailInfo.detail.deviceModel
              }}</FormItem>
              <FormItem label="OS版本">{{
                deviceDetailInfo.detail.deviceVersion
              }}</FormItem>
              <FormItem label="设备名称">{{
                deviceDetailInfo.detail.deviceName
              }}</FormItem>
              <FormItem label="是否root">{{
                deviceDetailInfo.detail.root === 1 ? "是" : "否"
              }}</FormItem>
              <FormItem label="账号">{{
                deviceDetailInfo.detail.users[0] &&
                deviceDetailInfo.detail.users[0].loginname
              }}</FormItem>
            </Form>
          </div>
        </div>
        <div class="device_users">
          <Table
            :columns="usersColumns"
            :data="deviceDetailInfo.detail.users"
          ></Table>
        </div>
      </div>
      <div class="section_title">详细信息</div>
      <div class="section_item">
        <div class="detail_left">
          <table class="my_table">
            <tr>
              <th style="width: 110px">设备号</th>
              <td>{{ deviceDetailInfo.detail.sn }}</td>
            </tr>
            <tr>
              <th>WiFi/MAC</th>
              <td>{{ deviceDetailInfo.detail.wifyMac }}</td>
            </tr>
            <tr>
              <th>蓝牙MAC</th>
              <td>{{ deviceDetailInfo.detail.blueMac }}</td>
            </tr>
          </table>
        </div>
        <div class="detail_center">
          <table class="my_table">
            <tr>
              <th style="width: 110px">系统内核</th>
              <td>{{ deviceDetailInfo.detail.sysKernel }}</td>
            </tr>
            <tr>
              <th>Rom版本</th>
              <td>{{ deviceDetailInfo.detail.romVersion }}</td>
            </tr>
            <tr>
              <th>SIM序列号</th>
              <td>{{ deviceDetailInfo.detail.sim }}</td>
            </tr>
          </table>
        </div>
        <div class="detail_right">
          <div id="memory_detail"></div>
        </div>
        <div></div>
      </div>
      <div class="section_title">已安装应用</div>
      <div class="section_table_wrap">
        <Table
          :columns="installsColumns"
          :data="deviceDetailInfo.detail.installs"
        ></Table>
      </div>
      <div class="section_title">地理位置</div>
      <div class="geo_location">
        <div class="geo_location_header">
          <div>只显示最近十条位置信息</div>
        </div>
        <div class="geo_location_main" v-if="deviceDetailInfo.show">
          <baidu-map
            class="baidu_map"
            ak="lLhDEKNUgqLGxogN0Nf9WPWSbzkMl6ph"
            :center="baiduMapInfo.center"
            :zoom="baiduMapInfo.zoom"
            :scroll-wheel-zoom="false"
          >
            <!--缩放-->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
            <!--定位-->
            <!-- <bm-geolocation
              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
              :showAddressBar="true"
              :autoLocation="true"
            ></bm-geolocation> -->
            <!--点-->
            <bm-marker
              v-for="(item, index) in baiduMapInfo.positions"
              :key="index"
              :position="{ lng: item.lng, lat: item.lat }"
              :dragging="false"
              animation="BMAP_ANIMATION_DROP"
              @click="bmMarkerClick(item)"
            >
              <!-- 信息弹窗 -->
              <bm-info-window
                title="坐标信息"
                :position="{
                  lng: item.lng,
                  lat: item.lat
                }"
                :show="item.show"
                @close="closeBmInfoWindow(item)"
                @open="openBmInfoWindow(item)"
              >
                <div v-if="item.address">地址：{{ item.address }}</div>
                <div>时间：{{ item.createtime }}</div>
                <!-- <div>经度：{{ item.lng }}</div>
                <div>维度：{{ item.lat }}</div> -->
              </bm-info-window>
            </bm-marker>
          </baidu-map>
        </div>
      </div>
      <div class="section_title">
        应用使用统计<span>应用使用统计（最近七天）</span>
      </div>
      <div class="section_table_wrap">
        <Table :columns="usesColumns" :data="deviceDetailInfo.detail.uses">
          <template slot-scope="{ row }" slot="durationSlot">
            <div>{{ formatSeconds(row.duration) }}</div>
          </template>
        </Table>
      </div>
      <div class="section_title">设备日志</div>
      <div class="section_table_wrap">
        <Table :columns="logsColumns" :data="deviceDetailInfo.detail.logs">
          <template slot-scope="{ row }" slot="doEventSlot">
            <div>{{ doEventInfo[row.doEvent] }}</div>
          </template>
        </Table>
      </div>
      <div slot="footer" style="text-align: center">
        <Button @click="deviceDetailInfo.show = false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmNavigation from "vue-baidu-map/components/controls/Navigation";
// import BmGeolocation from "vue-baidu-map/components/controls/Geolocation";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
import * as echarts from "echarts";
import ControlWs from "@/utils/ControlWs";
let controlWs = new ControlWs();
import ControlWSMsg from "@/utils/ControlWSMsg";
import { exportToExcel } from "@/utils/exportToExcel";
import { class_list, user_list_cs } from "@/api/school";
import {
  device_manager_list_d,
  device_manager_export_d,
  device_manager_export_id,
  device_manager_detail_d
} from "@/api/device_manager";
import { password_detail_userpwd } from "@/api/setting";
import { stPad_detail_web } from "@/api/stPad";
import { logPush_add } from "@/api/log";
import {
  weekDay,
  padDevices,
  padViolates,
  doEventInfo,
  formatSeconds
} from "@/utils";
export default {
  components: {
    BaiduMap,
    BmNavigation,
    // BmGeolocation,
    BmMarker,
    BmInfoWindow
  },
  data() {
    return {
      // 延时刷新
      delayedInfo: {
        // 单位秒
        time: 3,
        timer: null
      },
      baiduMapInfo: {
        center: "郑州市",
        zoom: 13,
        positions: []
      },
      weekDay,
      padDevices,
      padViolates,
      doEventInfo,
      formatSeconds,
      userInfo: {},
      // ws连接后回发信息
      wsEnterInfo: {
        // 消息ID
        mid: null,
        // 是否进入
        isEnter: false
      },
      searchForm: {
        classid: null,
        atype: 0,
        name: "",
        page: 1,
        size: 10,
        list: [],
        total: 0
      },
      devicePswInfo: {
        show: false,
        controlPwd: null,
        logoutPwd: null
      },
      tableSelection: [],
      controlMessageInfo: {
        show: false,
        title: "",
        content: "",
        classid: null,
        snList: [],
        useridList: []
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur"
          }
        ],
        content: [
          {
            required: true,
            message: "请选择内容",
            trigger: "blur"
          }
        ]
      },
      schoolInfo: {
        schoolid: null,
        schoolname: null,
        classList: []
      },
      columns: [
        {
          type: "selection",
          fixed: "left",
          width: 60,
          align: "center"
        },
        {
          title: "序号",
          fixed: "left",
          align: "center",
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index +
                (this.searchForm.page - 1) * this.searchForm.size +
                1
            );
          }
        },
        {
          title: "登录账号",
          fixed: "left",
          minWidth: 100,
          slot: "loginnameSlot",
          align: "center"
        },
        {
          title: "姓名",
          minWidth: 80,
          key: "username",
          align: "center"
        },
        {
          title: "状态",
          slot: "onlineSlot",
          width: 90,
          align: "center"
        },
        {
          title: "设备型号",
          width: 150,
          key: "deviceModel",
          align: "center"
        },
        {
          title: "设备号",
          minWidth: 170,
          key: "sn",
          align: "center"
        },
        // {
        //   title: "Rom版本",
        //   minWidth: 200,
        //   key: "romVersion",
        //   align: "center"
        // },
        {
          title: "更新时间",
          key: "updatetime",
          width: 190,
          align: "center"
        },
        {
          title: "操作",
          fixed: "right",
          slot: "actionSlot",
          width: 275,
          align: "center"
        }
      ],
      strategyInfo: {
        username: null,
        userid: null,
        rversion: null,
        padid: null,
        show: false,
        hastime: false, // 是否开启时间策略：0否 1是
        padTimes: [], // 平板策略时间
        hasapp: false, //是否开启应用策略：0否 1是
        padApps: [], //appid集合
        hasdevice: false, //是否开启设备策略：0否 1是
        padDevices: [], //授权应用
        pdtypeInfo: {},
        haswifi: false, //是否开启wifi白名单策略：0否 1是
        padWifis: [], //wifi白名单
        hasviolate: false, //是否开启违规通知：0否 1是
        padViolates: [] //设备违规
      },
      violationColumns: [
        {
          title: "违规事件",
          slot: "violationEvents",
          align: "center"
        },
        {
          title: "是否通知",
          slot: "noticed",
          align: "center"
        },
        {
          title: "违规处理",
          slot: "violationHandling",
          align: "center"
        }
      ],
      // 查看详情
      deviceDetailInfo: {
        show: false,
        username: null,
        detail: {
          usedMemory: null,
          createtime: null,
          romVersion: null,
          positions: [],
          deviceVersion: null,
          userid: null,
          wifyMac: null,
          deviceName: null,
          users: [],
          installs: [],
          sysKernel: null,
          totalMemory: null,
          ddid: null,
          regionid: null,
          sim: null,
          root: null,
          blueMac: null,
          deviceModel: null,
          uses: [],
          sn: null,
          logs: []
        }
      },
      usersColumns: [
        {
          title: "历史登录账号",
          key: "loginname",
          align: "center"
        },
        {
          title: "设备使用人",
          key: "username",
          align: "center"
        },
        {
          title: "操作时间",
          key: "createtime",
          width: 190,
          align: "center"
        }
      ],
      installsColumns: [
        {
          title: "应用名称",
          key: "appName",
          align: "center"
        },
        {
          title: "版本名称",
          key: "appVersion",
          align: "center"
        },
        {
          title: "版本号",
          key: "appNum",
          align: "center"
        },
        {
          title: "包名",
          key: "appPackage",
          align: "center"
        },
        {
          title: "创建时间",
          key: "createtime",
          width: 190,
          align: "center"
        }
      ],
      usesColumns: [
        {
          title: "应用名称",
          key: "appName",
          align: "center"
        },
        {
          title: "使用时长",
          slot: "durationSlot",
          align: "center"
        },
        {
          title: "启动次数",
          key: "num",
          align: "center"
        }
      ],
      logsColumns: [
        {
          title: "设备使用人",
          key: "username",
          align: "center"
        },
        {
          title: "事件",
          slot: "doEventSlot",
          align: "center"
        },
        {
          title: "描述",
          key: "comm",
          align: "center"
        },
        {
          title: "操作时间",
          key: "createtime",
          width: 190,
          align: "center"
        }
      ]
    };
  },
  created() {
    this.userInfo = JSON.parse(
      localStorage.getItem("xh_control_userInfo")
    ).content;
    this.getClassList();
    this.initMonitorWS();
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    }
  },
  beforeDestroy() {
    controlWs.myevent.$off("ws_error");
    controlWs.myevent.$off("ws_open");
    controlWs.myevent.$off("ws_getmsg");
    controlWs.closeWs();
  },
  methods: {
    initMemoryDetailEcharts() {
      let getMemoryInfo = this.getMemoryInfo;
      let _totalMemory = this.deviceDetailInfo.detail.totalMemory;
      let _usedMemory = this.deviceDetailInfo.detail.usedMemory;
      let _residueMemory = _totalMemory - _usedMemory;
      const options = {
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            let memoryInfo = getMemoryInfo(params.value);
            return `${params.name}：${memoryInfo.size}${memoryInfo.unit}`;
          }
        },
        legend: {
          bottom: "10",
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          //图例距离饼图的距离
          itemGap: 10,
          orient: "horizontal",
          data: ["内部存储"],
          textStyle: {
            color: "#253A70"
          }
        },
        color: ["#FFC300", "#FF8D1A"],
        series: [
          {
            type: "pie",
            name: "内部存储",
            radius: ["30%", "45%"],
            center: ["50%", "45%"],
            label: {
              formatter: (params) => {
                let memoryInfo = getMemoryInfo(params.value);
                return `${params.name}\n${memoryInfo.size}${memoryInfo.unit}`;
              },
              borderWidth: 1,
              borderRadius: 4,
              color: "#7C8DB5",
              fontSize: 12,
              lineHeight: 18
            },
            data: [
              { value: _residueMemory, name: "剩余" },
              { value: _usedMemory, name: "已使用" }
            ]
          }
        ]
      };
      const memoryEcharts = echarts.init(
        document.getElementById("memory_detail")
      );
      memoryEcharts.clear();
      memoryEcharts.setOption(options);
    },
    getMemoryInfo(memorySize) {
      let memoryInfo = {
        size: memorySize,
        unit: "B"
      };
      if (memoryInfo.size / 1000 < 1000) {
        memoryInfo.size = Math.floor((memoryInfo.size / 1000) * 100) / 100;
        memoryInfo.unit = "KB";
      } else if (memoryInfo.size / 1000 / 1000 < 1000) {
        memoryInfo.size =
          Math.floor((memoryInfo.size / 1000 / 1000) * 100) / 100;
        memoryInfo.unit = "MB";
      } else {
        memoryInfo.size =
          Math.floor((memoryInfo.size / 1000 / 1000 / 1000) * 100) / 100;
        memoryInfo.unit = "GB";
      }
      return memoryInfo;
    },
    initMonitorWS() {
      controlWs.setWs();
      this.getWSEventInfo();
    },
    getWSEventInfo() {
      controlWs.myevent.$on("ws_error", () => {
        this.$Message.error("网络异常，请检查网络");
      });
      controlWs.myevent.$on("ws_open", () => {
        this.sendAfterConnection();
      });
      controlWs.myevent.$on("ws_getmsg", (data) => {
        if (data.code === 666) {
          if (this.wsEnterInfo.mid === data.mid) {
            this.wsEnterInfo.isEnter = true;
          }
        }
        if (!this.wsEnterInfo.isEnter) {
          return;
        }
      });
    },
    // 连接后回发(需确认)
    sendAfterConnection() {
      this.wsEnterInfo.isEnter = false;
      let controlWSMsg = new ControlWSMsg(controlWs.ws, this.userInfo.adminid);
      controlWSMsg.afterConnection({
        userid: String(this.userInfo.adminid),
        username: this.userInfo.aname,
        schoolid: this.powerParams.objectid,
        usertype: 1
      });
      controlWSMsg.send((isSend) => {
        if (isSend) {
          this.wsEnterInfo.mid = controlWSMsg.mid;
        }
      });
    },
    classChange(classid) {
      this.searchForm.classid = classid;
      this.searchList();
    },
    // 搜索
    searchList() {
      this.searchForm.page = 1;
      this.getList();
    },
    // 页码改变
    pageChange(page) {
      this.searchForm.page = page;
      this.getList();
    },
    // 每页显示数量改变
    pageSizeChange(size) {
      this.searchForm.size = size;
      this.searchForm.page = 1;
      this.getList();
    },
    // 获取班级列表
    getClassList() {
      class_list({
        // rtype: this.powerParams.rtype,
        // objectid: this.powerParams.objectid,
        schoolid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.schoolInfo = {
            schoolid: data.obj.id,
            schoolname: data.obj.name,
            classList: data.obj.children
          };
          this.searchList();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    // 获取列表
    getList() {
      this.tableSelection = [];
      device_manager_list_d({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        page: this.searchForm.page,
        size: this.searchForm.size,
        schoolid: this.schoolInfo.schoolid,
        classid: this.searchForm.classid,
        atype: this.searchForm.atype,
        name: this.searchForm.name
      }).then((data) => {
        if (data.code === 0) {
          this.searchForm.list = data.obj.data;
          this.searchForm.total = data.obj.total;
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    // 设备导出
    toDeviceExport() {
      device_manager_export_d({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        schoolid: this.schoolInfo.schoolid,
        classid: this.searchForm.classid,
        atype: this.searchForm.atype,
        name: this.searchForm.name
      }).then((data) => {
        if (data.code === 0) {
          exportToExcel(
            [
              {
                list: data.obj.map((item) => {
                  return {
                    登录名: item.loginname,
                    姓名: item.username,
                    // 1在线2离线
                    在线状态:
                      item.online === 1
                        ? "在线"
                        : item.online === 2
                        ? "离线"
                        : "",
                    设备型号: item.deviceModel,
                    设备号: item.sn,
                    Rom版本: item.romVersion,
                    更新时间: item.updatetime
                  };
                }),
                name: "设备导出"
              }
            ],
            "设备导出"
          );
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    // 安装应用导出
    toInstallingAppExport() {
      device_manager_export_id({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        schoolid: this.schoolInfo.schoolid,
        classid: this.searchForm.classid
      }).then((data) => {
        if (data.code === 0) {
          exportToExcel(
            [
              {
                list: data.obj.map((item) => {
                  return {
                    登录名: item.loginname,
                    姓名: item.username,
                    班级: item.classname,
                    应用名称: item.appName,
                    包名: item.appPackage,
                    版本名称: item.appVersion,
                    MAC地址: item.mac,
                    时间: item.createtime
                  };
                }),
                name: "安装应用导出"
              }
            ],
            "安装应用导出"
          );
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    // 查看
    toView(row) {
      device_manager_detail_d({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        name: row.sn
      }).then((data) => {
        if (data.code === 0) {
          this.deviceDetailInfo.show = true;
          this.deviceDetailInfo.username = row.username;
          this.deviceDetailInfo.detail = data.obj;
          let _positions = this.deviceDetailInfo.detail.positions;
          this.baiduMapInfo.positions = _positions.map((item, index) => {
            return {
              show: index === 0 ? true : false,
              address: item.address,
              lng: item.lon,
              lat: item.lat,
              createtime: item.createtime
            };
          });
          if (_positions.length > 0) {
            let _firstItem = this.baiduMapInfo.positions[0];
            this.baiduMapInfo.center = {
              lng: _firstItem.lng,
              lat: _firstItem.lat
            };
          } else {
            this.baiduMapInfo.center = "郑州市";
          }
          this.initMemoryDetailEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    bmMarkerClick(item) {
      this.baiduMapInfo.positions.forEach((pItem) => {
        pItem.show = false;
      });
      item.show = true;
    },
    openBmInfoWindow(item) {
      this.baiduMapInfo.positions.forEach((pItem) => {
        pItem.show = false;
      });
      item.show = true;
    },
    closeBmInfoWindow(item) {
      item.show = false;
    },
    // 策略
    toStrategy(row) {
      stPad_detail_web({ objectid: row.userid }).then((res) => {
        if (res.code === 0) {
          this.strategyInfo.username = row.username;
          this.strategyInfo.userid = row.userid;
          this.strategyInfo.padid = res.obj.padid;
          this.strategyInfo.rversion = res.obj.rversion;
          this.strategyInfo.hastime = res.obj.hastime ? true : false;
          this.strategyInfo.hasapp = res.obj.hasapp ? true : false;
          this.strategyInfo.hasdevice = res.obj.hasdevice ? true : false;
          this.strategyInfo.haswifi = res.obj.haswifi ? true : false;
          this.strategyInfo.hasviolate = res.obj.hasviolate ? true : false;
          this.strategyInfo.padApps = res.obj.padApps || [];
          this.strategyInfo.padWifis = res.obj.padWifis || [];
          this.strategyInfo.padTimes = res.obj.padTimes || [];
          if (this.strategyInfo.hasdevice) {
            let pdtypeInfo = {};
            this.strategyInfo.padDevices = res.obj.padDevices;
            this.strategyInfo.padDevices.forEach((item) => {
              pdtypeInfo[item.pdtype] = item.enabled;
            });
            this.strategyInfo.pdtypeInfo = pdtypeInfo;
          }
          if (this.strategyInfo.hasviolate) {
            let padViolatesInfo = {};
            this.strategyInfo.padViolates = res.obj.padViolates;
            this.strategyInfo.padViolates.forEach((item) => {
              item.handleMethod = item.handleMethod.split("；");
              padViolatesInfo[item.violateType] = item;
            });
            this.strategyInfo.padViolatesInfo = padViolatesInfo;
          }
          this.strategyInfo.show = true;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    // 设备密码
    toPsw(row) {
      password_detail_userpwd({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        userid: row.userid
      }).then((data) => {
        if (data.code === 0) {
          this.devicePswInfo = {
            show: true,
            controlPwd: data.obj.controlPwd,
            logoutPwd: data.obj.logoutPwd
          };
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    // 解除绑定
    toUnbind(row) {
      this.$Modal.confirm({
        title: "提示",
        content: "确定对所选设备进行解除绑定操作吗？",
        onOk: () => {
          this.controlRemoveBind([row.sn], [row.userid]);
        },
        onCancel: () => {}
      });
    },
    selectionChange(selection) {
      this.tableSelection = selection;
      let userid_sn = this.tableSelection.map((item) => {
        return `${item.userid}_${item.sn}`;
      });
      this.searchForm.list.forEach((item) => {
        if (userid_sn.includes(`${item.userid}_${item.sn}`)) {
          item._checked = true;
        } else {
          item._checked = false;
        }
      });
    },
    // 表格行点击
    deviceTableRowClick(row, index) {
      let otherSelectedList = this.tableSelection.filter((item) => {
        return item.sn !== row.sn;
      });
      if (
        (this.tableSelection.length > 0 &&
          otherSelectedList.length === this.tableSelection.length) ||
        this.tableSelection.length === 0
      ) {
        row._checked = true;
        this.tableSelection.push(row);
      } else {
        row._checked = false;
        this.tableSelection = otherSelectedList;
      }
      this.searchForm.list.splice(index, 1, row);
    },
    // 其他操作
    dropdownSelected(name) {
      if (!this.wsEnterInfo.isEnter) {
        this.$Message.error("推送服务不可用");
        return;
      }
      let userList = this.tableSelection.filter((row) => row.sn);
      let snList = [];
      let useridList = [];
      userList.forEach((item) => {
        snList.push(item.sn);
        if (item.userid) {
          useridList.push(item.userid);
        }
      });
      if (name === "1") {
        // 恢复出厂
        if (snList.length === 0) {
          this.$Message.error("请勾选至少一个设备。");
          return;
        }
        this.$Modal.confirm({
          title: "提示",
          content: "确定对所选设备进行恢复出厂设置操作吗？",
          onOk: () => {
            this.controlRestoreFactory(snList, useridList);
          },
          onCancel: () => {}
        });
      } else if (name === "2") {
        // 发送消息
        if (snList.length === 0) {
          this.$Message.error("请勾选至少一个设备。");
          return;
        }
        this.controlMessageInfo = {
          show: true,
          title: "",
          content: "",
          classid: null,
          snList,
          useridList
        };
      } else if (name === "3") {
        // 整班发送消息
        user_list_cs({
          classid: this.searchForm.classid
        }).then((data) => {
          if (data.code === 0) {
            if (data.obj.length === 0) {
              this.$Message.error("当前班级没有设备");
              return;
            }
            this.controlMessageInfo = {
              show: true,
              title: "",
              content: "",
              classid: this.searchForm.classid,
              snList: data.obj,
              useridList: []
            };
          } else {
            this.$Message.error(data.msg);
          }
        });
      } else if (name === "4") {
        // 解除锁定
        if (snList.length === 0) {
          this.$Message.error("请勾选至少一个设备。");
          return;
        }
        this.$Modal.confirm({
          title: "提示",
          content: "确定对所选设备进行解除锁定操作吗？",
          onOk: () => {
            this.controlRemoveLimit(snList, useridList);
          },
          onCancel: () => {}
        });
      } else if (name === "5") {
        // 锁定
        if (snList.length === 0) {
          this.$Message.error("请勾选至少一个设备。");
          return;
        }
        this.$Modal.confirm({
          title: "提示",
          content: "确定对所选设备进行锁定操作吗？",
          onOk: () => {
            this.controlLimitedUse(snList, useridList);
          },
          onCancel: () => {}
        });
      } else if (name === "6") {
        // 更新策略
        if (snList.length === 0) {
          this.$Message.error("请勾选至少一个设备。");
          return;
        }
        this.$Modal.confirm({
          title: "提示",
          content: "确定对所选设备进行更新策略操作吗？",
          onOk: () => {
            this.controlUpdateStrategy(snList, useridList);
          },
          onCancel: () => {}
        });
      } else if (name === "7") {
        // 重启设备
        if (snList.length === 0) {
          this.$Message.error("请勾选至少一个设备。");
          return;
        }
        this.$Modal.confirm({
          title: "提示",
          content: "确定对所选设备进行重启设备操作吗？",
          onOk: () => {
            this.controlRebootDevice(snList, useridList);
          },
          onCancel: () => {}
        });
      } else if (name === "9") {
        // 解除管控
        if (snList.length === 0) {
          this.$Message.error("请勾选至少一个设备。");
          return;
        }
        this.$Modal.confirm({
          title: "提示",
          content: "确定对所选设备进行解除管控操作吗？",
          onOk: () => {
            this.controlRemoveDevice(snList, useridList);
          },
          onCancel: () => {}
        });
      } else if (name === "10") {
        // 解除绑定
        if (snList.length === 0) {
          this.$Message.error("请勾选至少一个设备。");
          return;
        }
        this.$Modal.confirm({
          title: "提示",
          content: "确定对所选设备进行解除绑定操作吗？",
          onOk: () => {
            this.controlRemoveBind(snList, useridList);
          },
          onCancel: () => {}
        });
      }
    },
    // 延时刷新
    delayedRefresh() {
      if (this.delayedInfo.timer) {
        clearTimeout(this.delayedInfo.timer);
      }
      this.delayedInfo.timer = setTimeout(() => {
        this.getList();
      }, this.delayedInfo.time * 1000);
    },
    // 恢复出厂设置
    controlRestoreFactory(snList, useridList) {
      let controlWSMsg = new ControlWSMsg(
        controlWs.ws,
        this.userInfo.adminid,
        snList
      );
      controlWSMsg.restoreFactory();
      controlWSMsg.send((isSend) => {
        if (isSend) {
          this.$Message.success("推送成功");
        } else {
          this.$Message.error("推送失败");
        }
      });
      this.$refs.deviceTable.selectAll(false);
      let form = {
        pushType: 6,
        pushObj: 1
      };
      form.userids = useridList;
      this.addPushLog(form);
      this.delayedRefresh();
    },
    // 发送消息
    controlSendMessage() {
      this.$refs.sendMsgForm.validate((valid) => {
        if (valid) {
          this.controlMessageInfo.show = false;
          let snList = this.controlMessageInfo.snList;
          let useridList = this.controlMessageInfo.useridList;
          let controlWSMsg = new ControlWSMsg(
            controlWs.ws,
            this.userInfo.adminid,
            snList
          );
          controlWSMsg.msgContent(
            JSON.stringify({
              title: this.controlMessageInfo.title,
              content: this.controlMessageInfo.content
            })
          );
          controlWSMsg.send((isSend) => {
            if (isSend) {
              this.$Message.success("推送成功");
            } else {
              this.$Message.error("推送失败");
            }
          });
          let form = {
            pushType: 1,
            pushObj: this.controlMessageInfo.classid ? 2 : 1,
            msgTitle: this.controlMessageInfo.title,
            content: this.controlMessageInfo.content
          };
          if (this.controlMessageInfo.classid) {
            form.pushObjid = this.controlMessageInfo.classid;
          } else {
            form.userids = useridList;
          }
          this.$refs.deviceTable.selectAll(false);
          this.addPushLog(form);
          this.delayedRefresh();
        }
      });
    },
    // 解除锁定
    controlRemoveLimit(snList, useridList) {
      let controlWSMsg = new ControlWSMsg(
        controlWs.ws,
        this.userInfo.adminid,
        snList
      );
      controlWSMsg.removeLimit();
      controlWSMsg.send((isSend) => {
        if (isSend) {
          this.$Message.success("推送成功");
        } else {
          this.$Message.error("推送失败");
        }
      });
      this.$refs.deviceTable.selectAll(false);
      let form = {
        pushType: 2,
        pushObj: 1
      };
      form.userids = useridList;
      this.addPushLog(form);
      this.delayedRefresh();
    },
    // 锁定
    controlLimitedUse(snList, useridList) {
      let controlWSMsg = new ControlWSMsg(
        controlWs.ws,
        this.userInfo.adminid,
        snList
      );
      controlWSMsg.limitedUse();
      controlWSMsg.send((isSend) => {
        if (isSend) {
          this.$Message.success("推送成功");
        } else {
          this.$Message.error("推送失败");
        }
      });
      this.$refs.deviceTable.selectAll(false);
      let form = {
        pushType: 3,
        pushObj: 1
      };
      form.userids = useridList;
      this.addPushLog(form);
      this.delayedRefresh();
    },
    // 更新策略
    controlUpdateStrategy(snList, useridList) {
      let controlWSMsg = new ControlWSMsg(
        controlWs.ws,
        this.userInfo.adminid,
        snList
      );
      controlWSMsg.updateStrategy();
      controlWSMsg.send((isSend) => {
        if (isSend) {
          this.$Message.success("推送成功");
        } else {
          this.$Message.error("推送失败");
        }
      });
      this.$refs.deviceTable.selectAll(false);
      let form = {
        pushType: 4,
        pushObj: 1
      };
      form.userids = useridList;
      this.addPushLog(form);
      this.delayedRefresh();
    },
    // 重启设备
    controlRebootDevice(snList, useridList) {
      let controlWSMsg = new ControlWSMsg(
        controlWs.ws,
        this.userInfo.adminid,
        snList
      );
      controlWSMsg.rebootDevice();
      controlWSMsg.send((isSend) => {
        if (isSend) {
          this.$Message.success("推送成功");
        } else {
          this.$Message.error("推送失败");
        }
      });
      this.$refs.deviceTable.selectAll(false);
      let form = {
        pushType: 5,
        pushObj: 1
      };
      form.userids = useridList;
      this.addPushLog(form);
      this.delayedRefresh();
    },
    // 解除管控
    controlRemoveDevice(snList, useridList) {
      let controlWSMsg = new ControlWSMsg(
        controlWs.ws,
        this.userInfo.adminid,
        snList
      );
      controlWSMsg.removeControl();
      controlWSMsg.send((isSend) => {
        if (isSend) {
          this.$Message.success("推送成功");
        } else {
          this.$Message.error("推送失败");
        }
      });
      this.$refs.deviceTable.selectAll(false);
      let form = {
        pushType: 7,
        pushObj: 1
      };
      form.userids = useridList;
      this.addPushLog(form);
      this.delayedRefresh();
    },
    // 解除绑定
    controlRemoveBind(snList, useridList) {
      let controlWSMsg = new ControlWSMsg(
        controlWs.ws,
        this.userInfo.adminid,
        snList
      );
      controlWSMsg.removeBind();
      controlWSMsg.send((isSend) => {
        if (isSend) {
          this.$Message.success("推送成功");
        } else {
          this.$Message.error("推送失败");
        }
      });
      this.$refs.deviceTable.selectAll(false);
      let form = {
        pushType: 8,
        pushObj: 1
      };
      form.userids = useridList;
      this.addPushLog(form).then(() => {
        this.getList();
      });
    },
    // 添加推送日志
    addPushLog(form) {
      return new Promise((resolve) => {
        if (form.userids && form.userids.length === 0) {
          resolve();
          return;
        }
        logPush_add(form).then((data) => {
          if (data.code === 0) {
            resolve();
          } else {
            this.$Message.error(data.msg);
          }
        });
      });
    },
    strategyPadTimes(id) {
      return this.strategyInfo.padTimes.filter((v) => v.week === id);
    }
  }
};
</script>

<style lang="less" scoped>
.main_root {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(100% - 10px);
  border-radius: 0;
  border: none;
  background-color: transparent;
  .main_left {
    margin-right: 10px;
    width: 200px;
    height: 100%;
    border-radius: 15px;
    border: 1px solid #e9f0f9;
    background-color: #fff;
    overflow: auto;
    .main_left_title {
      margin: 0 10px 10px;
      padding: 20px 0 14px;
      line-height: 20px;
      font-size: 16px;
      text-align: center;
      color: #798cb5;
      border-bottom: 1px solid #e9f0f9;
    }
    .class_list {
      max-height: calc(100% - 67px);
      font-size: 14px;
      line-height: 32px;
      text-align: center;
      overflow: auto;
      .class_item {
        margin: 0 10px;
        border-radius: 6px;
        cursor: pointer;
        &:hover,
        &.selceted {
          font-weight: bold;
          color: #339dff;
          background-color: #dbeeff;
        }
      }
    }
  }
  .main_right {
    width: calc(100% - 210px);
    height: 100%;
    border-radius: 15px;
    border: 1px solid #e9f0f9;
    background-color: #fff;
    overflow: auto;
    .search_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 16px 16px;
      .search_left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .search_right {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /deep/.ivu-dropdown {
          &:hover {
            .arrow_down {
              transform: rotate(180deg);
            }
          }
        }
        .drop_btn {
          padding: 0 6px 0 10px;
          line-height: 30px;
          border-radius: 8px;
          border: 1px solid #d8dce9;
          cursor: pointer;
          .arrow_down {
            margin: 4px;
            color: #96acdf;
            transition: all 0.2s ease-in-out;
          }
        }
      }
    }
  }
}
.device_psw {
  display: flex;
  justify-content: center;
  align-items: center;
  .device_psw_title {
    margin: 0 16px;
    font-size: 16px;
  }
  .device_psw_num {
    padding: 0 10px;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid #ced9f2;
    background: #f3f4fc;
  }
}
.content {
  .strategy_list {
    font-family: "SourceHanSansCN";
    .strategy_title {
      height: 40px;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div:first-of-type {
        font-weight: bold;
        span {
          font-size: 22px;
          color: #339dff;
          margin-right: 4px;
        }
      }
    }
    .strategy_content {
      border-radius: 6px 6px 0 0;
      border: 1px solid #ced9f2;
      .strategy_top {
        display: flex;
        height: 46px;
        align-items: center;
        background: #edf3ff;
        padding-left: 20px;
        border-bottom: 1px solid #ced9f2;
        span {
          font-size: 16px;
          color: #253a70;
          font-weight: 400;
          font-family: "SourceHanSansCN";
        }
      }
      .strategy_bottom {
        display: flex;
        flex-wrap: wrap;
        padding: 20px;
        .app_list {
          margin: 0 16px 16px 0;
          width: 100px;
          height: 110px;
          border-radius: 10px;
          border: 1px solid #798cb51a;
          background: #ffffff;
          text-align: center;
          position: relative;
          img {
            margin: 16px 0;
            width: 40px;
            height: 40px;
            object-fit: cover;
          }
          .appName {
            width: 100px;
            padding: 0 8px;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 14px;
          }
          .checked {
            position: absolute;
            right: 2px;
            top: 8px;
            /deep/ .ivu-checkbox-inner {
              border-radius: 50%;
            }
          }
          &:hover {
            cursor: pointer;
            box-shadow: 10px 10px 20px 0 #339dff26;
          }
        }
        .device_list {
          display: flex;
          height: 80px;
          align-items: center;
          margin-right: 40px;
          .icon {
            width: 56px;
            height: 56px;
            border-radius: 6px;
            border: 1px solid #e5e5e5;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              font-size: 28px;
              color: #339dff;
            }
          }
          .title {
            width: 92px;
            margin: 0 10px;
          }
        }
        .padWifis {
          border-radius: 5px;
          border: 1px solid #339dff;
          background: #eaf5ff;
          padding: 4px 20px 4px 16px;
          height: 26px;
          margin: 0 20px 10px 0;
          position: relative;
          .title {
            line-height: 14px;
          }
          img {
            width: 16px;
            height: 16px;
            object-fit: cover;
            position: absolute;
            right: -4px;
            top: -8px;
            cursor: pointer;
          }
        }
      }
    }
    .nodata {
      color: #798cb5;
      font-size: 16px;
      line-height: 30px;
    }
  }
  .showtime {
    .week {
      display: flex;
      width: 100%;
      .day {
        width: 14.2%;
        border: 1px solid #ced9f2;
        border-right: none;
        &:last-of-type {
          border-right: 1px solid #ced9f2;
        }
        .day_title {
          width: 100%;
          height: 40px;
          line-height: 40px;
          background: #edf3ff;
          border-bottom: 1px solid #ced9f2;
          text-align: center;
        }
        .day_content {
          min-height: 50px;
          padding: 10px;
          .time {
            height: 30px;
            line-height: 30px;
            border-radius: 6px;
            background: #dbeeff;
            text-align: center;
            color: #339dff;
            font-size: 14px;
            font-weight: 500;
            margin-top: 10px;
            font-family: "SourceHanSansCN";
          }
        }
      }
    }
  }
}
.section_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  font-size: 18px;
  line-height: 20px;
  font-weight: bold;
  border-left: 4px solid #339dff;
  > span {
    font-weight: normal;
    font-size: 16px;
  }
}
.section_table_wrap {
  margin: 16px 0;
  border: 1px solid #ced9f2;
  border-bottom: none;
}
.section_item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 16px 0;
  .device_base {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 16px 0;
    width: 50%;
    .device_base_left {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 10px;
      width: 120px;
      height: 240px;
      border-radius: 15px;
      border: 4px solid #000;
      .phone_dot {
        position: absolute;
        top: 10px;
        margin: 0 auto;
        width: 30px;
        height: 8px;
        border-radius: 4px;
        background-color: #000;
      }
    }
    .device_base_right {
      width: calc(100% - 140px);
      /deep/.ivu-form-item {
        margin-bottom: 0;
        .ivu-form-item-content {
          line-height: 36px;
          font-size: 16px;
          font-weight: bold;
          color: #253a70;
        }
      }
    }
  }
  .device_users {
    width: calc(50% - 10px);
    border: 1px solid #ced9f2;
    border-bottom: none;
  }
  .my_table {
    width: 100%;
    empty-cells: show;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #dcdee2;
    border-spacing: 0;
    box-sizing: border-box;
    color: #253a70;
    font-size: 16px;
    th {
      padding: 0;
      line-height: 46px;
      font-weight: normal;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      background-color: #edf3ff;
      border: 1px solid #ced9f2;
    }
    td {
      position: relative;
      padding: 0;
      line-height: 22px;
      color: #798cb5;
      text-align: center;
      vertical-align: middle;
      // white-space: nowrap;
      word-break: break-all;
      white-space: normal;
      border: 1px solid #ced9f2;
    }
  }
  .detail_left {
    margin-right: 15px;
    width: calc(50% - 280px);
  }
  .detail_center {
    margin-right: 15px;
    width: calc(50% - 150px);
  }
  .detail_right {
    width: 400px;
    height: 200px;
    #memory_detail {
      width: 400px;
      height: 200px;
    }
  }
}
.geo_location {
  margin: 16px 0;
  border: 1px solid #ced9f2;
  .geo_location_header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 16px;
    line-height: 44px;
    font-size: 16px;
    color: #339dff;
    border-bottom: 1px solid #ced9f2;
    background: #edf3ff;
  }
  .geo_location_main {
    height: 400px;
    .baidu_map {
      width: 100%;
      height: 100%;
    }
  }
}
.lock_img_box {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    margin-left: 4px;
    width: 18px;
  }
}
</style>
